在网页开发中，动画效果能给用户带来流畅的视觉体验，但有时候我们需要在中途打断正在执行的动画。jQuery 提供的 stop() 方法就是专门用来处理这种情况的，它能立刻停止匹配元素上正在运行的动画。这是 jQuery 的内置方法，掌握它能让你的交互动画控制更加得心应手。
方法解读
stop() 方法接收两个可选的布尔值参数，分别是 clearQueue 和 jumpToEnd。理解这两个参数，是真正用好这个方法的关键。
先说说队列动画这个概念。打个比方，我们给同一个元素连续绑定了好几个动画方法，比如先改变高度，再改变宽度，接着又改变高度。这时候，后面的动画不会马上执行，而是乖乖排进一个队列里，等前面的动画执行完了，它才会启动。这就是典型的队列动画机制。
参数详情
clearQueue 参数就是用来控制队列去留的。它的默认值是 false，也就是说，如果你直接调用 $("div").stop()，不加任何参数，它只会停掉正在跑的那个动画，队列里排着队的下一个动画会立刻接上，自动开始执行。
这里有个很实用的个人经验分享：我早期做项目时，经常遇到点击停止按钮后，元素还在动的情况，排查很久才发现就是没搞清楚这个默认行为。如果你想要彻底清静，不想让后续排队的动画再跑出来，就得把 clearQueue 设为 true。
jumpToEnd 参数也是布尔值，默认值同样是 false。它用来决定是否立刻跳到当前动画的最终状态。比如一个元素正在从宽 60px 变宽到 400px 的过程中，你调用了带有 jumpToEnd 为 true 参数的停止方法，它就不会停在半路，而是立刻变成最终 400px 的宽度。这个参数在需要元素立刻回到完整形态的场景里特别有用，比如关闭一个展开动画，比起看到一半的残缺效果，直接让它到达终点再处理会显得更利落。
本节课程知识要点
在开发中，建议先明确你停止动画的目的。如果只是单纯暂停，不加参数即可；如果要彻底终结所有动画并立刻呈现最终效果，就把两个参数都设为 true。不要盲目使用，要根据交互需求来做判断。我个人的建议是，在处理如导航栏下拉菜单这类需要快速响应的界面时，stop(true, true) 组合能减少很多因动画队列堆积导致的视觉延迟。
基础示例：最简单的停止操作
先看一个基础用法。下面这个例子中，有一个元素和一个“开始动画”的按钮，还有一个“停止”按钮。点击“开始动画”后，元素会在 2 秒内向右扩展宽度并改变文字。在动画过程中，点击“停止”按钮，就会立即停住。因为没有带任何参数，此时只有当前动画停止，并没有后续排队的动画。
<!DOCTYPE html>
<html>
<head>
<title> jQuery stop() 基础示例 </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$("div").text("代码号学习编程，从这里开始").animate({ width: 400 }, 2000);
});
$("#stop").click(function() {
$("div").stop();
});
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}
</style>
</head>
<body>
<h4> jQuery stop() 方法的基础使用 </h4>
<button id = "start"> 开始动画 </button>
<button id = "stop"> 停止 </button>
<div></div>
</body>
</html>
进阶示例：深度控制队列与最终状态
下面这个例子展示了队列动画的完整控制。我们给同一个元素安排了四个连续的动画：先增加高度，再扩展宽度，接着又减小高度，之后改变宽度。这是一个典型的动画链。如果只是中途点击“停止”按钮，按照默认情况，当前动画停止后，队列里的下一个动画就会立刻开始。但在本示例中，我们给 stop() 方法传递了两个 true 参数，它的作用是：立刻结束当前动画并跳到最终状态，同时把后面排队的三个动画全部清空，不再执行。
<!DOCTYPE html>
<html>
<head>
<title> jQuery stop() 队列控制示例 </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$("div").animate({height: 250 }, "slow").text("代码号学习编程，队列动画解析");
$("div").animate({width: 250 }, "slow");
$("div").animate({height: 50 }, "slow");
$("div").animate({width: 400 }, "slow");
});
$("#stop").click(function() {
$("div").stop(true, true);
});
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}
</style>
</head>
<body>
<h4> 使用 stop(true, true) 彻底终止动画序列 </h4>
<button id = "start"> 开始动画序列 </button>
<button id = "stop"> 彻底停止 </button>
<div></div>
</body>
</html>
在这个进阶示例中，你可以在任意时刻点击“彻底停止”按钮，元素会立刻定格在它当时的最终目标形态，并且不会再有任何后续动作。这种控制力在处理多步骤动画效果的交互元素时相当重要。
