在jQuery中,我们可以使用stop()方法来停止元素正在执行的动画效果。

语法:

$().stop(stopAll, goToEnd)

说明:

stopAll和goToEnd都是可选参数,它们取值都是布尔值,默认值都是false。

stopAll表示是否停止队列动画。当取值为false时,仅停止当前动画;当取值为true时,停止当前动画以及后面所有队列动画。

goToEnd表示是否将动画跳转到当前动画的最终效果状态。

其中,stop()方法共有4种形式,如下表所示。

stop()方法的4种形式
形式 说明
stop() 等价于stop(false, false),仅停止当前动画,后面的动画还可以继续执行
stop(true) 等价于stop(true,false),停止当前动画,并且停止后面的动画
stop(true, true) 当前动画继续执行,只停止后面的动画
stop(false, true) 停止当前动画,跳到最后一个动画,并且执行最后一个动画

一般来说,在实际开发中我们只会用到stop()方法的第1个参数,很少用到第2个参数。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:50px; height:50px; background-color:lightskyblue; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery.color.js"></script> <script> $(function () { $("#btn-start").click(function () { $("div").animate({ "width": "200px" }, 2000) .animate({ "background-color": "red" }, 2000) .animate({ "height": "200px" }, 2000) .animate({ "background-color": "blue" }, 2000); }); $("#btn-stop").click(function () { $("div").stop(); }) }) </script> </head> <body> <input id="btn-start" type="button" value="开始" /> <input id="btn-stop" type="button" value="停止" /><br /> <div></div> </body> </html>

浏览器预览效果如图所示。

分析:

在这个例子中,我们使用animate()方法定义了4个动画。当我们点击【开始】按钮后,过了一会如果再点击【停止】按钮的话,就会立即停止当前执行的动画(也就是停止当前的animate()方法),然后跳到下一个动画,也就是下一个animate()方法。如果再次点击【停止】按钮,它又会跳到下一个动画,以此类推。小伙伴们可以自行测试感受一下。

如果想要停止所有队列动画,可以定义stop()方法的第一个参数为true来实现,代码如下:

$("#btn-stop").click(function () { $("div").stop(true); })

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:50px; height:50px; background-color:lightskyblue; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").hover(function () { $(this).animate({ "height": "150px" }, 500); }, function () { $(this).animate({ "height": "50px" }, 500); //移出时返回原状态 }) }) </script> </head> <body> <div></div> </body> </html>

浏览器预览效果如图所示。

分析:

在这个例子中,我们使用hover()方法定义鼠标移入和鼠标移出时的动画效果。当我们快速地移入移出元素时,会发现一个很奇怪的bug:元素会不断地变长变短!也就是说,动画会不断执行,根本停不下来!

这种“根本停不下来”的bug在实际开发中经常会碰到,小伙伴们一定要特别注意。实际上,这个bug是动画累积所导致的。在jQuery中,如果一个动画没有执行完,它就会被添加到“动画队列”中去。在这个例子中,每一次移入或移出,都会产生一个动画,如果该动画没有被执行完,它就会被添加到动画队列中,然后没有被执行完的动画会继续执行,直到所有动画执行完毕。

要解决这类bug的话,我们只需要在移入或移出动画执行之前加入stop()方法,就能轻松解决。最终修改后的代码如下:

$("div").hover(function () { $(this).stop().animate({ "height": "150px" }, 500); }, function () { $(this).stop().animate({ "height": "50px" }, 500); //移出时返回原状态 })

对于这种由于动画累积产生的bug,我们还可以通过is(":animated")来判断当前动画状态来解决。对于is(":animated")这种方式,我们在后面“8.9 判断动画状态”这一节会详细给大家介绍。

实际上,jQuery还有一个方法可以中断动画——finish()。这个方法与stop(true, true)效果类似,因为它会清除排队的动画并使当前动画跳到最终值。不过,与stop(true, true)不同的是,它也会使所有排队的动画都跳到各自的最终值。finish()方法用得不多,我们简单了解一下即可。