jquery stop和finish停止运动
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/post/7283.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知