js进阶 13-6 jquery动画效果相关常用函数有哪些
一、总结
一句话总结：animate()，stop()，finish()，delat()四个。
1、stop()方法的基本用法是什么（stop()当然也可以停止所有的）？
终止当前动画，但是同元素后面的动画会接着执行，比如在队列动画中，终止的话只终止了当前的动画。
30 $('#btn2').click(function(){
31 //$('#div1').stop()
32 //$('#div1').stop(true)
33 $('#div1').stop(true,true)
34 })
2、stop()方法和finish()方法的区别是什么？
finish():停止所有动画，跳转到动画的最终效果那
finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。
30 $('#btn2').click(function(){
31 //$('#div1').stop()
32 //$('#div1').stop(true)
33 $('#div1').stop(true,true)
34 })
35 $('#btn3').click(function(){
36 $('#div1').finish()
37 })
3、jquery动画中的延迟函数是哪个？
delay()
38 $('#btn4').click(function(){
39 $('#div1').animate({left:'500px'},1000)
40 .animate({top:'500px'},1000).delay(1000)
41 .animate({left:'10px'},1000)
42 .animate({top:'100px'},1000)
43 })
二、jquery动画效果相关常用函数有哪些
1、自定义动画
jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现，原理跟CSS3动画原理是一样的。
- animate()方法执行CSS属性集的自定义动画。
语法：animate(params,[speed],[easing],[fn])
参数：params:一组包含作为动画属性和终值的样式属性和及其值的
集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left
- stop()方法停止当前正在运行的动画。
语法：$(selector),stop(stopA11,goToEnd)
参数：stopA11 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了stopA11参数时使用。
- finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。
- delat()将队列中下一个动画延迟指定的时间后执行。
- jQuery.fx.off关闭页面上所有的动画。
- jQuery.fx.interval设置动画的显示帧速。默认值为13
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style type="text/css"> 10 input{width: 100px;height: 30px;} 11 #div1{width: 100PX;height: 100PX;background: red;position: absolute;left: 10px;top: 100px} 12 </style> 13 </head> 14 <body> 15 <h3>jQuery动画效果</h3> 16 <input id="btn1" type="button" value="animate"> 17 <input id="btn2" type="button" value="stop"> 18 <input id="btn3" type="button" value="finish"> 19 <input id="btn4" type="button" value="delay"> 20 <input id="btn5" type="button" value=":animated"><br> 21 <div id="div1">jQuery动画效果</div> 22 <script> 23 //jQuery.fx.off() 24 $('#btn1').click(function(){ 25 $('#div1').animate({left:'500px'},1000) 26 .animate({top:'500px'},1000) 27 .animate({left:'10px'},1000) 28 .animate({top:'100px'},1000) 29 }) 30 $('#btn2').click(function(){ 31 //$('#div1').stop() 32 //$('#div1').stop(true) 33 $('#div1').stop(true,true) 34 }) 35 $('#btn3').click(function(){ 36 $('#div1').finish() 37 }) 38 $('#btn4').click(function(){ 39 $('#div1').animate({left:'500px'},1000) 40 .animate({top:'500px'},1000).delay(1000) 41 .animate({left:'10px'},1000) 42 .animate({top:'100px'},1000) 43 }) 44 $('#btn5').click(function(){ 45 $(':animated').stop(true).css('background','orange') 46 }) 47 </script> 48 </body> 49 </html>