微信扫一扫打赏支持

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

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>

 

 

 

 
posted @ 2018-07-15 13:26  范仁义  阅读(590)  评论(0)  编辑  收藏  举报