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、代码

 <!DOCTYPE html>
 <html lang="en">
 <style>
 </style>
 <head>
   <meta charset="UTF-8">
   <title>演示文档</title>
   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
   <style type="text/css">
     input{width: 100px;height: 30px;}
     #div1{width: 100PX;height: 100PX;background: red;position: absolute;left: 10px;top: 100px}
   </style>
 </head>
 <body>
   <h3>jQuery动画效果</h3>
   <input id="btn1" type="button" value="animate">
   <input id="btn2" type="button" value="stop">
   <input id="btn3" type="button" value="finish">
   <input id="btn4" type="button" value="delay">
   <input id="btn5" type="button" value=":animated"><br>
   <div id="div1">jQuery动画效果</div>
 <script>
 //jQuery.fx.off()
     $('#btn1').click(function(){
     $('#div1').animate({left:'500px'},1000)
               .animate({top:'500px'},1000)
               .animate({left:'10px'},1000)
               .animate({top:'100px'},1000)
   })
   $('#btn2').click(function(){
     //$('#div1').stop()
     //$('#div1').stop(true)
     $('#div1').stop(true,true)
   })
   $('#btn3').click(function(){
     $('#div1').finish()
   })
   $('#btn4').click(function(){
     $('#div1').animate({left:'500px'},1000)
               .animate({top:'500px'},1000).delay(1000)
               .animate({left:'10px'},1000)
               .animate({top:'100px'},1000)
   })
   $('#btn5').click(function(){
     $(':animated').stop(true).css('background','orange')
   })
 </script>
 </body>
 </html>