使用jQuery動畫時，當快速操作時，讓動畫效果與滑鼠的動作保持一致 ...
很多時候需要停止匹配元素正在進行的動畫，比如，當滑鼠選入元素時顯示菜單，滑鼠離開時隱藏下拉菜單，如果滑鼠移入移出過快的話就會導致動畫效果與滑鼠的動作不一致的情況，此時stop()就派上用場了。
stop()方法的語法結構為：
stop([clearQueue],[gotoEnd]);
參數clearQueue和gotoEnd都是可選參數，為Boolean值（true或false）。clearQueue代表是否清空未執行完的動畫隊列，gotoEnd代表是否直接將正在執行的動畫跳轉到末狀態。
（1）直接使用使用stop()方法，則會立即停止當前正在進行的動畫，如果接下來還有動畫等待繼續進行，則以當前狀態開始接下來的動畫。比如下麵例子：
<!-- html部分 --> <div id="panel" style="width: 60px;height: 22px;background-color: #eee;">呵呵</div>
/* js部分 */ $("#panel").hover(function() { $(this).stop().animate({height: "150"}, 200); },function() { $(this).stop().animate({height: "22"}, 300); });
此時，在游標移入時，觸發游標移入動畫（在0.2秒內height變為150），在動畫還沒執行完的時候游標移出，則停止當前動畫（可能height還未到達150），執行游標移出觸發的動畫（在0.3秒內height變回22）。反之亦然。
如果遇到組合動畫，例如：
$("#panel").hover(function() {
$(this).stop()
.animate({height: "150"}, 200) //如果在此時觸發了游標的移出事件
//將執行下麵的動畫
.animate({width: "300"},300); //而非游標移出事件中的動畫
},function() {
$(this).stop()
.animate({height: "22"}, 200)
.animate({width: "60"},300);
});
此時只用一個不帶參數的stop()方法就顯得力不從心了。因為stop()方法只會停止正在進行的動畫，如果動畫正執行在第1階段（改變height的階段），則觸發游標移出事件後，只會停止當前的動畫，並繼續進行下麵的.animate({width: "300"},300)動畫，而游標移出事件中的動畫要等這個動畫結束後才會繼續執行，這顯然不是預期的結果。這種情況下stop()方法的第一個參數就發揮作用了。
（2）stop(true)，此時程式會把當前元素接下來尚未執行完的動畫隊列清空。所以可以把上面代碼改成如此代碼，就能實現預期的效果。
$("#panel").hover(function() {
$(this).stop(true)
.animate({height: "150"}, 200) //如果在此時觸發了游標的移出事件
//直接跳過後面的動畫隊列
.animate({width: "300"},300);
},function() {
$(this).stop()
.animate({height: "22"}, 200)
.animate({width: "60"},300);
});
（3）第2個參數（gotoEnd）可以用於讓正在執行的動畫直接到達結束時刻的狀態，通常用於後一個動畫需要基於前一個動畫的末狀態的情況，可以通過stop(false,true)這種方式來讓當前動畫直接到達末狀態。
（4）兩者結合起來stop(true,true)，即停止當前動畫並直接到達當前動畫的末狀態，並清空動畫隊列。
（5）註意，jQuery只能設置正在執行的動畫的最終狀態，而沒有提供直接到達執行動畫隊列最終狀態的方法。例如有一組動畫：
$("div.content")
.animate({width: "300"}, 200)
.animate({height: "150"}, 300)
.animate({opacity: "0.2"}, 200);
無論怎麼設置stop()方法，均無法再改變"width"或者"height"時，將此<div>元素的末狀態變成300*150大小，並且設置透明度為0.2。
溫馨提示：
jQuery中的動畫有show()、hide()、fadeIn()、fadeOut()、slideDown()、slideUp()、animate()等等。stop()方法對上述的動畫都適用。
參考自《鋒利的jQuery第二版》
