近期查看前輩的代碼，發現在使用animate()的時候前面需要加上stop()，來防止移進移出的閃動問題，但卻不知道stop()裡面參數的真正意思，今天查了下stop()中參數的意義和具體使用方法，分享給大家。 stop(true)等價於stop(true,false): 停止被選元素的所有加入隊列 ...
近期查看前輩的代碼，發現在使用animate()的時候前面需要加上stop()，來防止移進移出的閃動問題，但卻不知道stop()裡面參數的真正意思，今天查了下stop()中參數的意義和具體使用方法，分享給大家。
stop(true)等價於stop(true,false): 停止被選元素的所有加入隊列的動畫。
stop(true,true):停止被選元素的所有加入隊列的動畫，但允許完成當前動畫。
stop()等價於stop(false,false):停止被選元素當前的動畫，但允許完成以後隊列的所有動畫。
stop(false,true):立即結束當前的動畫到最終效果，然後完成以後隊列的所有動畫。
$(selector).stop(stopAll,goToEnd)
stopAll:可選。規定是否停止被選元素的所有加入隊列的動畫。
goToEnd:可選。規定是否允許完成當前的動畫。該參數只能在設置了 stopAll 參數時使用。
第一個參數的意思是是否清空動畫序列，也就是停止的是當前元素的動畫效果還是停止後面附帶的所有動畫效果，一般為false，跳過當前動畫效果，執行下一個動畫效果；
第二個參數是是否將當前動畫效果執行到最後，意思就是停止當前動畫的時候動畫效果剛剛執行了一半，這個時候想要的是動畫執行之後的效果，那麼這個參數就為true。否則動畫效果就會停在stop執行的時候。
下麵是從網上找的一個小例子，足夠幫助大家理解stop()的使用了。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>stop的用法案例</title>
<style type="text/css">
#animater{
width: 150px;
background:activeborder;
border: 1px solid black;
/*為了移動，需設置此屬性*/
position: relative;
}
</style>
<script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
// 點擊不同的button執行不同的操作
$('#button1').click(function(){
//預設參數是false，不管寫一個false還是兩個false還是沒寫false效果一樣
$('#box').stop();
});
$('#button2').click(function(){
//第二個參數預設false
$('#box').stop(true);
});
$('#button3').click(function(){
$('#box').stop(false,true);
});
$('#button4').click(function(){
$('#box').stop(true,true);
});
})
</script>
</head>
<body>
<p><input type='button' value='開始測試' id='start'></p>
<div id="button">
<input type="button" id="button1" value="stop()"/>
<input type="button" id="button2" value="stop(true)"/>
<input type="button" id="button3" value="stop(false,true)"/>
<input type="button" id="button4" value="stop(true,true)"/>
</div>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop運動參數測試</div>
</body>
</html>
——非原創，侵權刪
