animate动画基础

标签：ast   animate动画   animate   div   img   mat   out   near   margin   

定义：

animate() 方法执行 CSS 属性集的自定义动画。

1、该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

2、只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

3、注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

简单小实例：

//图片动画效果
function addEvent_3(){
    third_imgDos.mouseover(function(){
        $(this).stop().animate({
             top:‘-10px‘
        },‘fast‘);//上移10px
    }).mouseout(function(){
        $(this).stop().animate({
            top:‘0px‘//复原
        },‘fast‘);
    });
}

注意：stop（）

 stop() 方法停止当前正在运行的动画。

加入stop()，防止动画在进行中出发多次，造成一种抖动感。

方式：

1、style：

1. backgroundPosition
2. borderWidth
3. borderBottomWidth
4. borderLeftWidth
5. borderRightWidth
6. borderTopWidth
7. borderSpacing
8. margin
9. marginBottom
10. marginLeft
11. marginRight
12. marginTop
13. outlineWidth
14. padding
15. paddingBottom
16. paddingLeft
17. paddingRight
18. paddingTop
19. height
20. width
21. maxHeight
22. maxWidth
23. minHeight
24. minWidth
25. font
26. fontSize
27. bottom
28. left
29. right
30. top
31. letterSpacing
32. wordSpacing
33. lineHeight
34. textIndent

注意：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

2、speed

动画速度，默认是“normal”

 可以是“毫秒”“slow”“fast”

3、easing

规定动画的数度

“swing”“linear”

4、callbank

animate()函数执行完之后要执行的函数

animate动画基础

标签：ast   animate动画   animate   div   img   mat   out   near   margin   

原文地址：https://www.cnblogs.com/Ace-suiyuan008/p/9280032.html