jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

stopAll和goToEnd。stopAll决定是否清除动画队列，而goToEnd决定是否立即完成当前动画，不同的参数组合会导致不同的行为。

在用户交互中，点击按钮停止动画，或者在hover事件中防止动画堆积。这些都是常见的需求。另外，用户可能遇到动画队列导致的问题，比如连续触发hover事件时动画效果异常，这时候需要stop(true)来清除队列。

1. 基本使用场景

场景描述

停止当前正在执行的动画，但允许后续动画继续执行。

代码示例 

<!DOCTYPE html><html><head><title>stop() 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#box {width: 100px;height: 100px;background-color: red;position: relative;}</style></head><body><button id="start">开始动画</button><button id="stop">停止动画</button><div id="box"></div><script>$("#start").click(function() {$("#box").animate({ left: "200px" }, 2000);$("#box").animate({ left: "0px" }, 2000);});$("#stop").click(function() {$("#box").stop(); // 仅停止当前动画，后续动画继续});</script></body></html>

效果说明

点击 开始动画 按钮后，#box 会先向右移动 2 秒，再返回原位 2 秒。

如果在移动过程中点击 停止动画，当前动画会立即停止，但后续动画会继续执行（例如，如果当前是向右移动，停止后会直接跳到返回原位的动画）。

2. 清除动画队列

场景描述

停止当前动画并清除所有已排队的动画，避免后续动画继续执行。

代码示例 

<!DOCTYPE html><html><head><title>stop(true) 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#box {width: 100px;height: 100px;background-color: blue;position: relative;}</style></head><body><button id="start">开始动画</button><button id="stop">停止动画</button><div id="box"></div><script>$("#start").click(function() {$("#box").animate({ left: "200px" }, 2000);$("#box").animate({ left: "0px" }, 2000);});$("#stop").click(function() {$("#box").stop(true); // 停止当前动画并清除队列});</script></body></html>

效果说明

点击 停止动画 后，当前动画会立即停止，并且后续动画（如返回原位）会被清除，#box 停留在当前位置。

3. 立即完成当前动画

场景描述

停止当前动画，并让当前动画直接跳转到最终状态，但不清除队列。

代码示例 

<!DOCTYPE html><html><head><title>stop(false, true) 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#box {width: 100px;height: 100px;background-color: green;position: relative;}</style></head><body><button id="start">开始动画</button><button id="stop">停止动画</button><div id="box"></div><script>$("#start").click(function() {$("#box").animate({ left: "200px" }, 2000);$("#box").animate({ left: "0px" }, 2000);});$("#stop").click(function() {$("#box").stop(false, true); // 立即完成当前动画，但不清除队列});</script></body></html>

效果说明

如果当前动画是向右移动（left: 200px），点击 停止动画 后，#box 会立即跳到 left: 200px 的位置，并继续执行后续的返回原位动画。

4. 停止所有动画并跳转到最终状态

场景描述

停止当前动画并清除队列，同时让当前动画跳转到最终状态。 

<!DOCTYPE html><html><head><title>stop(true, true) 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#box {width: 100px;height: 100px;background-color: purple;position: relative;}</style></head><body><button id="start">开始动画</button><button id="stop">停止动画</button><div id="box"></div><script>$("#start").click(function() {$("#box").animate({ left: "200px" }, 2000);$("#box").animate({ left: "0px" }, 2000);});$("#stop").click(function() {$("#box").stop(true, true); // 停止当前动画并跳转到最终状态，同时清除队列});</script></body></html>

效果说明

点击 停止动画 后，当前动画会立即跳转到最终状态（如 left: 200px），并且后续动画会被清除，#box 停留在最终状态。

5. 防止动画堆积（常见场景）

场景描述

在 hover 事件中，快速连续触发动画时，可能会出现动画堆积问题。使用 stop() 可以解决此问题。

代码示例 

<!DOCTYPE html><html><head><title>hover 动画堆积问题</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#panel {width: 100px;height: 100px;background-color: orange;}</style></head><body><div id="panel"></div><script>$("#panel").hover(function() {$(this).stop().animate({ height: "200px" }, 500); // 鼠标进入时扩大高度},function() {$(this).stop().animate({ height: "100px" }, 500); // 鼠标离开时恢复高度});</script></body></html>

效果说明

如果在动画执行过程中快速移出/移入 #panel，动画可能会堆积。通过 stop() 方法，可以清除队列并立即停止当前动画，确保动画平滑运行。