js进阶 13-4 jquery自定义动画animate()如何使用

一、总结

一句话总结：animate(params,[speed],[easing],[fn])，参数：params:一组包含作为动画属性和终值的样式属性和及其值的。

1、animate中的样式设置的时候的注意事项是什么？

样式名必须以驼峰式方式，不然会出错，和在css中的不一样

集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left

2、jquery库的animate方法的缺陷是什么？

19     //jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性

3、jquery位移动画如何实现？

设置为绝对定位了才能移动left和top

29         $('#btn2').click(function(){
30             $('#div1').animate({
31                 left:'300px',
32                 top:'300px'
33             })
34         })

4、jquery累积动画如何实现？

直接在animate()里面+=即可

35         $('#btn3').click(function(){
36             $('#div1').animate({
37                 left:'+=50px',
38             })
39         })

二、jquery自定义动画animate()如何使用

1、自定义动画

jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现，原理跟CSS3动画原理是一样的。

animate()方法执行CSS属性集的自定义动画。
语法：animate(params,[speed],[easing],[fn])

参数：params:一组包含作为动画属性和终值的样式属性和及其值的

集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 7     <style type="text/css">
 8         input{width: 100px;height: 30px;}
 9         #div1{width: 150px;height: 150px;border:1px solid green;background: orange;position: absolute;}
10       </style>
11 </head>
12 <body>
13     <h3>jQuery动画效果</h3>
14     <input id="btn1" type="button" value="animate">
15     <input id="btn2" type="button" value="位移">
16     <input id="btn3" type="button" value="累积动画">
17     <div id="div1">jQuery动画效果</div>
18     <script>
19     //jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性
20         $('#btn1').click(function(){
21             $('#div1').animate({
22                 '50px',
23                 height:'50px',
24                 fontSize:'0.5em',
25                 opacity:0.5,
26                 backgroundColor:'red'
27             },2000)
28         })
29         $('#btn2').click(function(){
30             $('#div1').animate({
31                 left:'300px',
32                 top:'300px'
33             })
34         })
35         $('#btn3').click(function(){
36             $('#div1').animate({
37                 left:'+=50px',
38             })
39         })
40     </script>
41 </body>
42 </html>