進(jìn)入主題之前，先來看一個(gè)例子：
<div class="button">
<button id="animate">animate</button>
</div>
<div class="box">
<p>這是box里的內(nèi)容</p>
</div>
<script>
$("#animate").on("click",function(){
$(".box").animate({
width: "500px"
},5000);
console.log("這是點(diǎn)擊時(shí)出現(xiàn)的文字");
});
</script>
為了效果更明顯跨新，動(dòng)畫的時(shí)間設(shè)置為5s，可以看出控制臺(tái)輸出的文字在點(diǎn)擊按鈕是立即觸發(fā)坏逢，這說明了一個(gè)事情域帐，即動(dòng)畫方法animate不是同步的，而是異步的是整，這就引申出了動(dòng)畫隊(duì)列肖揣。
動(dòng)畫的執(zhí)行不是同步的，而是加入到動(dòng)畫隊(duì)列中浮入，這樣就可以實(shí)現(xiàn)多個(gè)動(dòng)畫效果連在一起龙优，構(gòu)成一個(gè)連續(xù)的動(dòng)畫。
queue( [ queueName ], callback( next ) )
queue()方法用來顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)隊(duì)列
-
queueName：一個(gè)含有隊(duì)列名的字符串事秀。默認(rèn)是fx彤断，標(biāo)準(zhǔn)的動(dòng)畫隊(duì)列 -
callback(next)：添加到隊(duì)列的新函數(shù)
<div class="button">
<button id="animate">animate</button>
</div>
<div class="box">
<p>這是box里的內(nèi)容</p>
<p></p>
</div>
<script>
$("#animate").on("click",function(){
setInterval(function(){
$(".box p").last().html("當(dāng)前動(dòng)畫隊(duì)列還有" + $(".box").queue().length);
},1000);
$(".box").animate({
width: "500px"
},5000).animate({
height: "500px"
},5000);
$(".box").queue(function(){
$(this).animate({
width: "50px"
});
$(this).css("background","#fff000");
});
$(".box").animate({
width: "200px"
},5000).animate({
height: "200px"
},5000);
console.log("這是點(diǎn)擊時(shí)出現(xiàn)的文字");
});
</script>
如上代碼，queue()方法的返回函數(shù)里animate()沒有執(zhí)行易迹，css()執(zhí)行了宰衙，后面的兩個(gè)animate()也沒有執(zhí)行，這說明了一件事赴蝇，queue()方法雖然可以給動(dòng)畫隊(duì)列添加新的動(dòng)畫菩浙，但是無法自動(dòng)執(zhí)行巢掺，而且會(huì)中斷動(dòng)畫隊(duì)列的執(zhí)行句伶。
dequeue([queueName])
dequeue()方法用來執(zhí)行匹配元素隊(duì)列的下一個(gè)函數(shù)
-
queueName：一個(gè)含有隊(duì)列名的字符串。默認(rèn)是fx陆淀，標(biāo)準(zhǔn)的動(dòng)畫隊(duì)列
$(".box").queue(function(){
$(this).animate({
width: "50px"
});
$(this).css("background","#fff000");
$(this).dequeue();
});
執(zhí)行之后考余，會(huì)發(fā)現(xiàn)queue()方法會(huì)把回調(diào)函數(shù)里新增的動(dòng)畫放在動(dòng)畫隊(duì)列的最后才執(zhí)行。
clearQueue([queueName])
clearQueue()方法用于清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫轧苫，并不影響當(dāng)前動(dòng)畫效果（即正在進(jìn)行的動(dòng)畫不受影響）楚堤，當(dāng)重新執(zhí)行時(shí)，動(dòng)畫隊(duì)列重新開始含懊，但已經(jīng)執(zhí)行過的隊(duì)列身冬，不會(huì)再顯示效果
-
queueName：一個(gè)含有隊(duì)列名的字符串。默認(rèn)是fx岔乔，標(biāo)準(zhǔn)的動(dòng)畫隊(duì)列
<div class="button">
<button id="animate">animate</button>
<button id="clearqueue">clearQueue</button>
</div>
<div class="box">
<p>這是box里的內(nèi)容</p>
<p></p>
</div>
<script>
$("#animate").on("click",function(){
setInterval(function(){
$(".box p").last().html("當(dāng)前動(dòng)畫隊(duì)列還有" + $(".box").queue().length);
},1000);
$(".box").animate({
width: "500px"
},5000).animate({
height: "500px"
},5000);
$(".box").queue(function(){
$(this).animate({
width: "50px"
});
$(this).css("background","#fff000");
});
$(".box").animate({
width: "200px"
},5000).animate({
height: "200px"
},5000);
console.log("這是點(diǎn)擊時(shí)出現(xiàn)的文字");
});
$("#clearqueue").on("click",function(){
$(".box").clearQueue();
});
</script>
finish()
停止當(dāng)前動(dòng)畫酥筝，并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)。
$("#finish").on("click",function(){
$(".box").finish();
});
stop([clearQueue ] [, jumpToEnd ])
停止當(dāng)前正在運(yùn)行的動(dòng)畫
- 參數(shù)為空：停止當(dāng)前動(dòng)畫雏门，執(zhí)行動(dòng)畫隊(duì)列中的下一個(gè)動(dòng)畫
- [clearQueue ]：boolean類型嘿歌，停止當(dāng)前正在進(jìn)行的動(dòng)畫掸掏，清空未執(zhí)行的動(dòng)畫隊(duì)列，影響動(dòng)畫效果
- [, jumpToEnd ]：boolean類型宙帝，停止當(dāng)前正在進(jìn)行的動(dòng)畫丧凤，清空未執(zhí)行的動(dòng)畫隊(duì)列，并直接跳到本次動(dòng)畫的結(jié)束
具體例子可參考：http://js.jirengu.com/vipeqisike
