jquery stop()方法有什麼用

在jquery中，stop()方法用於為被選元素停止當前正在執行的動畫效果，語法「$(selector).stop(stopAll,goToEnd)」；引數stopAll和goToEnd都是可選引數，其取值都是布林值，預設值都是false。

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

在jquery中，stop()方法用於為被選元素停止當前正在執行的動畫效果。

語法：

$(selector).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>

預覽效果下圖所示。

在這個例子中，我們使用 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")這種方式，之後會詳細介紹。

實際上，jQuery 還有一個方法可以中斷動畫——finish()。這個方法與 stop(true,true) 方法效果類似，因為它會清除排隊的動畫並使當前動畫跳到最終值。不過，與 stop(true,true) 不同的是，它會使所有排隊的動畫都跳到各自的最終值。finish() 方法用得不多，我們簡單瞭解一下即可。

【推薦學習：、】

以上就是jquery stop()方法有什麼用的詳細內容，更多請關注TW511.COM其它相關文章！