.stop()
.stop( [ clearQueue ], [ jumpToEnd ] ) 返回： jQuery
描述： 停止匹配元素當(dāng)前正在運(yùn)行的動(dòng)畫。
-
version added: 1.2.stop( [ clearQueue ], [ jumpToEnd ] )
clearQueue一個(gè)布爾值，指示是否取消以列隊(duì)動(dòng)畫。默認(rèn)
false。jumpToEnd 一個(gè)布爾值指示是否當(dāng)前動(dòng)畫立即完成。默認(rèn)
false.
當(dāng)一個(gè)元素調(diào)用.stop()，當(dāng)前正在運(yùn)行的動(dòng)畫（如果有的話）立即停止。如果，例如，一個(gè)元素用.slideUp()隱藏的時(shí)候.stop()被調(diào)用，元素現(xiàn)在仍然被顯示，但將是先前高度的一部分。不調(diào)用回調(diào)函數(shù)。
如果同一元素調(diào)用多個(gè)動(dòng)畫方法，后來的動(dòng)畫被放置在元素的效果隊(duì)列中。這些動(dòng)畫不會(huì)開始，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候，隊(duì)列中的下一個(gè)動(dòng)畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行。
如果jumpToEnd參數(shù)提供true值，當(dāng)前動(dòng)畫將停止，但該元素是立即給予每個(gè)CSS屬性的目標(biāo)值。用上面的.slideUp()為例子,該元素將立即隱藏。如果提供回調(diào)函數(shù)將立即被調(diào)用。
當(dāng)我們需要對(duì)元素做mouseenter和mouseleave動(dòng)畫時(shí)，.stop()方法明顯是有效的：
<div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123" /> </div>
我們可以創(chuàng)建一個(gè)不錯(cuò)的淡入效果，使用.stop(true, true)鏈?zhǔn)秸{(diào)用無須排隊(duì)（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)畫 。當(dāng)這樣做，所有動(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>