進入主題之前，先看一個例子：
<div class="button">
<button id="animate">animate</button>
</div>
<div class="box">
<p>這是box里的內(nèi)容</p>
</div>
<style>
.box{
border:2px solid blue;
}
</style>
<script>
$("#animate").on("click",function(){
$(".box").animate({
width: "500px"
},5000);
console.log("這是點擊時出現(xiàn)的文字");
});
</script>
為了效果更明顯把将，動畫的時間設(shè)置為5s，可以看出控制臺輸出的文字在點擊按鈕是立即觸發(fā)忆矛，這說明了一個事情察蹲，即動畫方法animate不是同步的，而是異步的催训，這就引申出了動畫隊列洽议。
動畫的執(zhí)行不是同步的，而是加入到動畫隊列中漫拭，這樣就可以實現(xiàn)多個動畫效果連在一起亚兄，構(gòu)成一個連續(xù)的動畫。
queue( [ queueName ], callback( next ) )
queue()方法用來顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)隊列
-
queueName：一個含有隊列名的字符串采驻。默認是fx审胚，標(biāo)準的動畫隊列 -
callback(next)：添加到隊列的新函數(shù)
<div class="button">
<button id="animate">animate</button>
</div>
<div class="box">
<p>這是box里的內(nèi)容</p>
<p></p>
</div>
<style>
.box{
border:2px solid blue;
}
</style>
<script>
$("#animate").on("click",function(){
setInterval(function(){
$(".box p").last().html("當(dāng)前動畫隊列還有" + $(".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("這是點擊時出現(xiàn)的文字");
});
</script>
如上代碼，queue()方法的返回函數(shù)里animate()沒有執(zhí)行挑宠，css()執(zhí)行了菲盾，后面的兩個animate()也沒有執(zhí)行，這說明了一件事各淀，queue()方法雖然可以給動畫隊列添加新的動畫懒鉴，但是無法自動執(zhí)行，而且會中斷動畫隊列的執(zhí)行。
dequeue([queueName])
dequeue()方法用來執(zhí)行匹配元素隊列的下一個函數(shù)
-
queueName：一個含有隊列名的字符串临谱。默認是fx璃俗，標(biāo)準的動畫隊列
$(".box").queue(function(){
$(this).animate({
width: "50px"
});
$(this).css("background","#fff000");
$(this).dequeue();
});
會發(fā)現(xiàn)queue()方法會把回調(diào)函數(shù)里新增的動畫放在動畫隊列的最后去執(zhí)行。
clearQueue([queueName])
clearQueue()方法用于清除動畫隊列中未執(zhí)行的動畫悉默，并不影響當(dāng)前動畫效果（即正在進行的動畫不受影響）城豁，當(dāng)重新執(zhí)行時，動畫隊列重新開始抄课，但已經(jīng)執(zhí)行過的隊列唱星，不會再顯示效果
-
queueName：一個含有隊列名的字符串。默認是fx跟磨，標(biāo)準的動畫隊列
<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>
<style>
.box{
border:2px solid blue;
}
</style>
<script>
$("#animate").on("click",function(){
setInterval(function(){
$(".box p").last().html("當(dāng)前動畫隊列還有" + $(".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("這是點擊時出現(xiàn)的文字");
});
$("#clearqueue").on("click",function(){
$(".box").clearQueue();
});
</script>
finish()
停止當(dāng)前動畫间聊，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)。
$("#finish").on("click",function(){
$(".box").finish();
});
stop([clearQueue ] [, jumpToEnd ])
停止當(dāng)前正在運行的動畫
- 參數(shù)為空：停止當(dāng)前動畫抵拘，執(zhí)行動畫隊列中的下一個動畫
- [clearQueue ]：boolean類型哎榴，停止當(dāng)前正在進行的動畫，清空未執(zhí)行的動畫隊列僵蛛，影響動畫效果
- [, jumpToEnd ]：boolean類型尚蝌，停止當(dāng)前正在進行的動畫，清空未執(zhí)行的動畫隊列充尉，并直接跳到本次動畫的結(jié)束
具體例子可參考：http://js.jirengu.com/vipeqisike
