jQuery中停止動(dòng)畫stop
動(dòng)畫在執(zhí)行過程中是允許被暫停的，當(dāng)一個(gè)元素調(diào)用.stop()方法，當(dāng)前正在運(yùn)行的動(dòng)畫（如果有的話）立即停止
語法：
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop還有幾個(gè)可選的參數(shù)，簡(jiǎn)單來說可以這3種情況
- .stop(); 停止當(dāng)前動(dòng)畫，點(diǎn)擊在暫停處繼續(xù)開始
- .stop(true); 如果同一元素調(diào)用多個(gè)動(dòng)畫方法，尚未被執(zhí)行的動(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)行
- .stop(true,true); 當(dāng)前動(dòng)畫將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫的目標(biāo)值
簡(jiǎn)單的說：參考下面代碼、
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
- stop()：只會(huì)停止第一個(gè)動(dòng)畫，第二個(gè)第三個(gè)繼續(xù)
- stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫
- stop(true ture)：停止動(dòng)畫，直接跳到第一個(gè)動(dòng)畫的最終狀態(tài)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>stop</h2>
<p>慕課網(wǎng),專注分享</p>
<div id="aaron">內(nèi)部動(dòng)畫</div>
<input id="exec" type="button" value="執(zhí)行動(dòng)畫"><br /><br />
點(diǎn)擊觀察動(dòng)畫效果：
<select id="animation">
<option value="1">stop()</option>
<option value="2">stop(true)</option>
<option value="3">stop(true,true)</option>
</select>
<a></a>
<input id="stop" type="button" value="停止動(dòng)畫">
<script type="text/javascript">
//點(diǎn)擊執(zhí)行動(dòng)畫
$("#exec").click(function(){
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
})
$("#stop").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//當(dāng)前當(dāng)前動(dòng)畫
$aaron.stop()
} else if (v == "2") {
//停止所以隊(duì)列
$aaron.stop(true)
} else if (v == "3") {
//停止動(dòng)畫，直接跳到當(dāng)前動(dòng)畫的結(jié)束
$aaron.stop(true,true)
}
});
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
