js进阶 13-5 jquery队列动画如何实现

一、总结

一句话总结：同一个jquery对象，直接写多个animate()就好。

1、什么是队列动画？

比如说先左再下，而不是左下一起走

2、怎么实现队列动画？

a、可以考虑用animate的动画结束函数来实现，但是这样的话太麻烦，一则嵌套容易出错，二则不适合多重队列动画
animate(params,[speed],[easing],[fn])

25     $('#btn2').click(function(){
26             $('#div1').animate({
27                 left:'300px'
28             },1000,function(){
29                 $('#div1').animate({
30                     top:'300px'
31                 },function(){
32                     $('#div1').animate({
33                         left:'50px'
34                     })
35                 })
36             })
37         })

b、直接写多个animate()就好

38         $('#btn3').click(function(){
39             $('#div1').animate({left:'300px'})
40                       .animate({top:'300px'})
41                       .animate({left:'30px'})
42         })

二、jquery队列动画如何实现

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,#div2,#div3{width: 100px;height: 100px;border:1px solid green;display: inline-block;background: orange;position: absolute;left: 10px;top: 100px}
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="队列动画1">
16     <input id="btn3" type="button" value="队列动画2"><br>
17         <div id="div1" style=" 100PX;height: 100PX;background: red">jQuery动画效果</div>
18     <script type="text/javascript">
19     $('#btn1').click(function(){
20             $('#div1').animate({
21                 left:'300px',
22                 top:'300px'
23             },1000)
24         })
25     $('#btn2').click(function(){
26             $('#div1').animate({
27                 left:'300px'
28             },1000,function(){
29                 $('#div1').animate({
30                     top:'300px'
31                 },function(){
32                     $('#div1').animate({
33                         left:'50px'
34                     })
35                 })
36             })
37         })
38         $('#btn3').click(function(){
39             $('#div1').animate({left:'300px'})
40                       .animate({top:'300px'})
41                       .animate({left:'30px'})
42         })
43     </script>
44     
45 </body>
46 </html>