.stop()
.stop( [ clearQueue ], [ jumpToEnd ] ) 返回： jQuery
描述： 停止匹配元素當(dāng)前正在運行的動畫。
-
version added: 1.2.stop( [ clearQueue ], [ jumpToEnd ] )
clearQueue一個布爾值，指示是否取消以列隊動畫。默認(rèn)
false。jumpToEnd 一個布爾值指示是否當(dāng)前動畫立即完成。默認(rèn)
false.
當(dāng)一個元素調(diào)用.stop()，當(dāng)前正在運行的動畫（如果有的話）立即停止。如果，例如，一個元素用.slideUp()隱藏的時候.stop()被調(diào)用，元素現(xiàn)在仍然被顯示，但將是先前高度的一部分。不調(diào)用回調(diào)函數(shù)。
如果同一元素調(diào)用多個動畫方法，后來的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當(dāng)調(diào)用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠(yuǎn)不會運行。
如果jumpToEnd參數(shù)提供true值，當(dāng)前動畫將停止，但該元素是立即給予每個CSS屬性的目標(biāo)值。用上面的.slideUp()為例子,該元素將立即隱藏。如果提供回調(diào)函數(shù)將立即被調(diào)用。
當(dāng)我們需要對元素做mouseenter和mouseleave動畫時，.stop()方法明顯是有效的：
<div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123" /> </div>
我們可以創(chuàng)建一個不錯的淡入效果，使用.stop(true, true)鏈?zhǔn)秸{(diào)用無須排隊（We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain）：
$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});
可以通過設(shè)置屬性
$.fx.off為true停止全局的動畫 。當(dāng)這樣做，所有動畫方法將立即設(shè)置元素的最終狀態(tài)，而不是所謂的顯示效果。
例子：
Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.
<!DOCTYPE html>
<html>
<head>
<style>div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});
// Start animation in the opposite direction
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script>
</body>
</html>