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