站長資訊網
在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前端開發視頻】
