首頁 > 文章 > web前端 > jquery stop()方法有什麼用

jquery stop()方法有什麼用

青灯夜游原創: 2022-03-01 18:32:382851瀏覽

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

jquery stop()方法有什麼用

本教學操作環境：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>

預覽效果下圖所示。

jquery stop()方法有什麼用

在這個範例中，我們使用 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>

預覽效果下圖所示。

jquery stop()方法有什麼用

在這個範例中，我們使用 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影片教學、web前端開發影片】

以上是jquery stop()方法有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery怎麼修改type屬性下一篇：jquery怎麼修改type屬性

看更多