js进阶 13-6 jquery动画效果相关常用函数有哪些-CSDN博客

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>