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>