jquery stop和finish停止运动
时间:6年前 阅读:4935
stop()接受三个参数(要停止的动画名称,是否清空队列中的动画,是否当前动画立即完成)
finish()是另一种停止动画的方式,可以停止当前正在运行的动画,清除所有排队的动画,并完成匹配元素所有的动画。
stop()会清除队列,保持现状。finish()会导致所有队列的动画的css属性值跳转到他们的最终值。
1、stop和finifh
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #pao{ position: absolute; width: 400px; height: 400px; top: 100px; left: 0; } </style> <script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#dd').click(function(){ $('#pao').animate({'left':'600px'},5000); }) $('#stop').click(function(){ // stop()是停止元素身上正在执行的动画,(说停马上停) $('#pao').stop(); }) $('#finish').click(function(){ // finish会停止动画,并且将元素的状态变为运动的最终指定的状态(简单理解:跑完到原来指定的终点再停) $('#pao').finish(); }) }) </script> </head> <body> <input type="button" name="dd" id="dd" value="来点我呀" /> <input type="button" name="stop" id="stop" value="stop停止" /> <input type="button" name="finish" id="finish" value="finish停止" /> <img src="https://www.qiquanji.com/data/img/dmj/201903251553516399115625.gif" id="pao"/> </body> </html>
2、stop和finifh 一些其它情况
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #pao{ position: absolute; width: 400px; height: 400px; top: 100px; left: 0; } </style> <script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> // 如果元素身上现在有多个运动,stop会停止元素身上现在正在执行的运动,然后开始运行队列中下一个运动 // 如果元素身上现在有多个运动,finish会停止元素身上所有运动,并且将元素的状态立即调整为最后一个运动指定的目标状态 // (比如:有4个运动12秒最终到达800px这个位置 ,如果点finish,它就把这4个运动清理掉了 ,不用走走停停,不用运动了直接送到终点800px得了) $(function(){ $('#tt1').click(function(){ $('#pao').animate({'left':'200px'},3000); }) $('#tt2').click(function(){ $('#pao').animate({'left':'400px'},3000); }) $('#tt3').click(function(){ $('#pao').animate({'left':'600px'},3000); }) $('#tt4').click(function(){ $('#pao').animate({'left':'800px'},3000); }) $('#dd').click(function(){ $('#pao').animate({'left':'600px'},3000); }) $('#stop').click(function(){ // stop()是停止元素身上正在执行的动画,(说停马上停) $('#pao').stop(); }) $('#finish').click(function(){ // finish会停止动画,并且将元素的状态变为运动的最终指定的状态(简单理解:跑完到原来指定的终点再停) $('#pao').finish(); }) }) </script> </head> <body> <input type="button" name="dd" id="tt1" value="200" /> <input type="button" name="dd" id="tt2" value="400" /> <input type="button" name="dd" id="tt3" value="600" /> <input type="button" name="dd" id="tt4" value="800" /> <input type="button" name="dd" id="dd" value="来点我呀" /> <input type="button" name="stop" id="stop" value="stop停止" /> <input type="button" name="finifh" id="finish" value="finish停止" /> <img src="https://www.qiquanji.com/data/img/dmj/201903251553516399115625.gif" id="pao"/> </body> </html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论