在jQuery中，我们可以使用stop()方法来停止元素正在执行的动画效果。
语法：
$().stop(stopAll, goToEnd)
说明：
stopAll和goToEnd都是可选参数，它们取值都是布尔值，默认值都是false。
stopAll表示是否停止队列动画。当取值为false时，仅停止当前动画；当取值为true时，停止当前动画以及后面所有队列动画。
goToEnd表示是否将动画跳转到当前动画的最终效果状态。
其中，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()方法用得不多，我们简单了解一下即可。
