在jQuery中，很多時候我們需要停止當前元素上正在執行的動畫效果，可以使用stop()方法來實現。
語法：
$().stop(clearQueue,gotoEnd)
說明：
參數clearQueue和參數gotoEnd都是可選參數，取值都為布爾值。兩個參數默認值都為false。
參數clearQueue表示是否要清空“未執行”的“動畫隊列”。這裡大家要看准了，清空的是整個“動畫隊列”，而不僅僅是某一個動畫。
參數gotoEnd，表示是否直接將正在執行的動畫跳轉到末狀態。
默認情況下，沒有參數值的stop()方法只會停止“當前正在執行”的動畫。如果你使用animate()方法為當前元素設置了A、B、C這3個動畫。如果當前正在執行的動畫是A，則只會停止動畫A的執行，不會阻止B和C的執行。如果我們想停止所有的動畫，可以使用設置參數clearQueue為true來實現。
用得比較多的是stop()和stop(true)這2種形式，而stop(true,true)和stop(false,true)這兩個了解一下即可，可以直接忽略。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:50px;
height:50px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#btn-start").click(function () {
$("#lvye").animate({ "width": "200px" }, 3000).animate({ "background-color": "red" }, 3000).animate({ "height": "200px" }, 3000).animate({ "background-color": "blue" }, 3000);
});
$("#btn-stop").click(function () {
$("#lvye").stop();
})
})
</script>
</head>
<body>
<input id="btn-start" type="button" value="開始" />
<input id="btn-stop" type="button" value="停止" /><br />
<div id="lvye"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，我們使用了4個animate()方法定義了一個隊列動畫，這個隊列動畫共有4段動畫。當我們點擊“開始”之後，過了一會然後點擊“停止”按鈕，就會立即“停止”當前執行的動畫（即停止當前的animate()方法），然後跳到下一段動畫（即下一個animate()方法）。如果又立即點擊“停止”按鈕，它又會跳到下一段動畫，以此類推。大家好好感性認識一下。
如果我們想停止所有的動畫，可以使用設置參數clearQueue為true來實現。jQuery實現代碼如下：
$("#btn-stop").click(function () {
$("#lvye").stop(true);
})
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*將塊元素轉換為行內塊元素*/
width:50px;
height:50px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").hover(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 500);
}, function () {
$(this).animate({ "width": "50px", "height": "50px" }, 500);//移出時返回原狀態
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，我們使用了hover事件來定義鼠標移入和移出這2個狀態實現的動畫效果。當我們快速地移入移出div時，會發現一個效果：animation動畫不斷地執行！這明顯就不是我們預期的效果。
其實這個bug是由於動畫累積導致的，如果一個動畫沒有執行完，它就會被添加到“動畫隊列”中去。在這個例子中，每一次移入或者移出，都會添加新一個動畫到“動畫隊列”中，然後沒有執行完的動畫會繼續執行，直到所有動畫執行完畢。這樣我們不難理解這個bug是怎麼產生的了。
此時要解決這個bug的話，我們只需要在移入動畫或者移出動畫執行之前加入stop()方法，就能解決這個問題。stop()方法會結束當前正在執行的動畫，並立即執行隊列中下一個動畫。修改後的jQuery代碼如下：
$(function () {
$("#lvye").hover(function () {
$(this).stop().animate({ "width": "100px", "height": "100px" }, 500);
}, function () {
$(this).stop().animate({ "width": "50px", "height": "50px" }, 500);//移出時返回原狀態
})
})
對於這種由於動畫在隊列中累積而產生的bug，我們還可以通過is(":animated")判斷當前動畫狀態來解決。這個我們在“jQuery判斷動畫狀態”這一節會詳細給大家介紹。
總結1、對於jQuery動畫，如果一個動畫沒有執行完就開始了一個新的動畫，這個沒有執行完的動畫就會被添加到隊列動畫中。然後動畫隊列中每一個動畫會按照順序執行，知道所有動畫執行完畢；
2、stop()方法在實際開發中唯一的用途：停止當前動畫，防止動畫累積的bug。