溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“jquery的stop()方法如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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 所示。
| 形式 | 說明 |
|---|---|
| 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()方法如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
