在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影片教學、web前端開發影片】
以上是jquery stop()方法有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
