jQuery stop()方法的使用

在 jQuery 中，我們可以使用 stop() 方法來停止元素正在執行的動畫效果。

語法：

$().stop(stopAll, goToEnd)

stopAll 和 goToEnd 都是可選引數，它們的取值都是布林值，預設值都是 false。stopAll 表示停止佇列動畫。當取值為 false 時，僅停止當前動畫；當取值為 true 時，停止當前動畫以及後面所有的佇列動畫。goToEnd 表示將動畫跳轉到當前動畫效果的最終狀態。

其中，stop() 方法共有 4 種形式，如表 1 所示。

表 1：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>

預覽效果如圖 1 所示。

圖 1：停止動畫的效果