隊列
- 隊列的本質是一個數組，對隊列的理解先從數組的push和shift開始。push是從數組尾端插入新的元素，shift是從數組首端刪除元素；分別對應隊列中得queue和dequeue。
- jquery所有動畫基于animate方法，而animate的動畫默認保存在名為fx的動畫隊列中。
- queue就是將動畫放進隊列中，dequeue就是將動畫從隊列中刪除并執行它。
jQuery : queue() 方法
queue() 方法顯示或操作在匹配元素上執行的函數隊列
.queue(queueName,newQueue)
queueName 可選。字符串值，包含序列的名稱。默認是 fx, 標準的效果序列。
每個元素均可擁有一到多個由 jQuery 添加的函數隊列。在大多數應用程序中，只使用一個隊列（名為 fx）。
動畫隊列
隊列運行在元素上異步地調用動作序列，而不會終止程序執行。典型例子時調用元素上的多個動畫方法。例如：
$('#foo').slideUp()
.fadeIn();
它的執行順序是元素先slideUp后再fadeIn，slideUp和fadeIn有先后順序。jquery會默認地將它們放進名為fx的隊列中，我們可以這樣認為：
var fx = [slideUp, fadeIn];
//相當于
$('#foo').queue('fx', fx);
//第一步：出列第一個元素slideUp并執行它
$('#foo').dequeue('fx'); //fx = ['inprogress', fadeIn]
//第二步：出列第二個元素fadeIn并執行它
$('#foo').dequeue('fx'); //fx = ['inprogress']
//第三步，隊列fx為空，動畫執行完畢
fx = [];
通過不斷的dequeue，fx每個元素逐個依次出列執行，直至隊列沒有元素。
也可以這樣理解
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('動畫執行完畢')
})
})
})
})
})
})
//等價于
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('真的完畢了')
})
注意：
- 當通過 .queue() 添加函數時，我們應當確保最終調用了 .dequeue()，這樣下一個排隊的函數才能執行
- 當這樣寫代碼時：
$('#foo').slideUp().fadeIn().css({'width':'200px'});
它的執行順序是元素寬度馬上變成200px的同時，slideUp也在執行，slideUp執行完后再執行fadeIn
自定義動畫
簡單的動畫不能滿足需求的時候，jquery提供了自定義動畫行為的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據這組對象移動。
$('#btn').click(function() {
$('#foo').animate({
opacity: 0.25,
left: '+=50',
}, 5000, function() {
console.log('執行完畢')
});
});
.clearQueue
清除動畫隊列中未執行的動畫
.finish
停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態
.stop( [clearQueue ] [, jumpToEnd ] )
停止當前正在運行的動畫
clearQueue(default: false)
jumpToEnd(default: false)
$('#btn6').click(function(){
//停止當前動畫
$('.box').stop()
})
$('#btn7').click(function(){
//停止當前動畫，并清除未執行的動畫隊列
$('.box').stop(true, false)
})
$('#btn8').click(function(){
//停止當前動畫，并清除未執行的動畫隊列，并且當前動畫展示最終狀態
$('.box').stop(true, true)
})
$('#btn9').click(function(){
//停止當前動畫，并清除未執行的動畫隊列，并且當前動畫展示最終狀態
$('.box').finish()
})
作者：彭榮輝
鏈接：http://www.lxweimin.com/u/0f804364a8a8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
