隊列
- 隊列的本質(zhì)是一個數(shù)組，對隊列的理解先從數(shù)組的push和shift開始靠益。push是從數(shù)組尾端插入新的元素丧肴，shift是從數(shù)組首端刪除元素；分別對應隊列中得queue和dequeue捆毫。
- jquery所有動畫基于animate方法闪湾，而animate的動畫默認保存在名為fx的動畫隊列中。
- queue就是將動畫放進隊列中绩卤，dequeue就是將動畫從隊列中刪除并執(zhí)行它途样。
jQuery : queue() 方法
queue() 方法顯示或操作在匹配元素上執(zhí)行的函數(shù)隊列
.queue(queueName,newQueue)
queueName 可選。字符串值濒憋，包含序列的名稱何暇。默認是 fx, 標準的效果序列。
每個元素均可擁有一到多個由 jQuery 添加的函數(shù)隊列凛驮。在大多數(shù)應用程序中裆站，只使用一個隊列（名為 fx）。
動畫隊列
隊列運行在元素上異步地調(diào)用動作序列黔夭，而不會終止程序執(zhí)行宏胯。典型例子時調(diào)用元素上的多個動畫方法。例如：
$('#foo').slideUp()
.fadeIn();
它的執(zhí)行順序是元素先slideUp后再fadeIn本姥，slideUp和fadeIn有先后順序肩袍。jquery會默認地將它們放進名為fx的隊列中，我們可以這樣認為：
var fx = [slideUp, fadeIn];
//相當于
$('#foo').queue('fx', fx);
//第一步：出列第一個元素slideUp并執(zhí)行它
$('#foo').dequeue('fx'); //fx = ['inprogress', fadeIn]
//第二步：出列第二個元素fadeIn并執(zhí)行它
$('#foo').dequeue('fx'); //fx = ['inprogress']
//第三步婚惫，隊列fx為空氛赐，動畫執(zhí)行完畢
fx = [];
通過不斷的dequeue，fx每個元素逐個依次出列執(zhí)行先舷，直至隊列沒有元素艰管。
也可以這樣理解
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('動畫執(zhí)行完畢')
})
})
})
})
})
})
//等價于
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('真的完畢了')
})
注意：
- 當通過 .queue() 添加函數(shù)時，我們應當確保最終調(diào)用了 .dequeue()蒋川，這樣下一個排隊的函數(shù)才能執(zhí)行
- 當這樣寫代碼時：
$('#foo').slideUp().fadeIn().css({'width':'200px'});
它的執(zhí)行順序是元素寬度馬上變成200px的同時牲芋，slideUp也在執(zhí)行，slideUp執(zhí)行完后再執(zhí)行fadeIn
自定義動畫
簡單的動畫不能滿足需求的時候捺球，jquery提供了自定義動畫行為的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動街图。
$('#btn').click(function() {
$('#foo').animate({
opacity: 0.25,
left: '+=50',
}, 5000, function() {
console.log('執(zhí)行完畢')
});
});
.clearQueue
清除動畫隊列中未執(zhí)行的動畫
.finish
停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)
.stop( [clearQueue ] [, jumpToEnd ] )
停止當前正在運行的動畫
clearQueue(default: false)
jumpToEnd(default: false)
$('#btn6').click(function(){
//停止當前動畫
$('.box').stop()
})
$('#btn7').click(function(){
//停止當前動畫懒构，并清除未執(zhí)行的動畫隊列
$('.box').stop(true, false)
})
$('#btn8').click(function(){
//停止當前動畫，并清除未執(zhí)行的動畫隊列耘擂，并且當前動畫展示最終狀態(tài)
$('.box').stop(true, true)
})
$('#btn9').click(function(){
//停止當前動畫胆剧，并清除未執(zhí)行的動畫隊列，并且當前動畫展示最終狀態(tài)
$('.box').finish()
})
