jQuery隊列控制方法詳解queue()/dequeue()/clearQueue()
先解釋一下這組方法各自的含義.
queue(name,[callback]): 當只傳入一個參數(shù)時, 它返回并指向第一個匹配元素的隊列(將是一個函數(shù)數(shù)組,隊列名默認是fx); 當有兩個參數(shù)傳入時, 第一個參數(shù)還是默認為fx的的隊列名, 第二個參數(shù)又分兩種情況, 當?shù)诙€參數(shù)是一個函數(shù)時, 它將在匹配的元素的隊列最后添加一個函數(shù). 當?shù)诙€參數(shù)是一個函數(shù)數(shù)組時,它將匹配元素的隊列用新的一個隊列來代替(函數(shù)數(shù)組).可能, 這個理解起來有點暈, 稍后, 后面會有點此查看DEMO.
dequeue(name): 這個好理解, 就是從隊列最前端移除一個隊列函數(shù), 并執(zhí)行它.
clearQueue([queueName]):這是1.4新增的方法. 清空對象上尚未執(zhí)行的所有隊列. 參數(shù)可選,默認為fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個參數(shù)的第二種參數(shù)即可實現(xiàn)clearQueue方法.
現(xiàn)在, 我們要實現(xiàn)這樣一個效果, 有標有1至7的數(shù)字方塊, 要求這七個方塊自左到右依次下落.點此查看DEMO
css與html部分我就不貼出來了,DEMO演示中有. 若按常規(guī)做法, 可能需要用如下jQ代碼來實現(xiàn):
$('.one').delay(500).animate({top:'+=270px'},500,function(){
$('.two').delay(500).animate({top:'+=270px'},500,function(){
$('.three').delay(500).animate({top:'+=270px'},500,function(){
$('.four').delay(500).animate({top:'+=270px'},500,function(){
$('.five').delay(500).animate({top:'+=270px'},500,function(){
$('.six').delay(500).animate({top:'+=270px'},500,function(){
$('.seven').animate({top:'+=270px'},500,function(){
alert('按序落體運動結束! Yeah!')
});
});
});
});
});
});
});
嗯, 沒錯, 效果很完美的呈現(xiàn)給出來了, 但這種暈眩的代碼, 你能忍受嗎? 即便可以忍受, 如果此時, 你想調(diào)換一個某個的執(zhí)行順序, 比如, 你想讓5落下后再開始下落3, 或者新加8至15八個方塊, 怎么辦? 重寫嗎? 在里面小心冀冀的改嗎? 顯然, 我們需要另外一種列簡明便捷的方法來實現(xiàn)這個效果, 那就是jQuery隊列控制方法.請看如下代碼:
var _slideFun=[
function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
alert('按序落體運動結束! Yeah!');
});}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
$('#demo').dequeue('slideList');
};
_takeOne();
這樣一來, 看起來是不是簡明多了. 如何實現(xiàn)?
1. 新建一個數(shù)組,把動畫函數(shù)依次放進去(這樣更改順序,新加動畫是不是方便多了?);
2. 用queue將這組動畫函數(shù)數(shù)組加入到slideList隊列中;
3. 用dequeue取出slideList隊列中第一個函數(shù), 并執(zhí)行它;
4. 初始執(zhí)行第一個函數(shù).
DEMO演示中也有詳解的注釋, 如果上面的說明還看不明白,請看源碼.
至于clearQueue()方法,就不多說了, 演示中停止按鈕調(diào)用的就是clearQueue()方法,當然你還可以用queue()方法直接將現(xiàn)在的函數(shù)列隊替換成[]空數(shù)組實現(xiàn)(個人比較推薦空數(shù)組替換.,更直觀).
相關文章
最近在做項目的時候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家2014-07-07
jQuery確實是一個挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應用，并在一定程度上改變了我們寫JavaScript代碼的習慣。2011-04-04
這篇文章主要為大家詳細介紹了jquery實現(xiàn)抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery實現(xiàn)的數(shù)值范圍range2dslider選取插件特效多款代碼分享
這篇文章主要介紹了jQuery實現(xiàn)的數(shù)值范圍range2dslider選取插件特效，整體特效非常逼真自然，推薦給大家，有需要的小伙伴可以參考下2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)默認是閉合的FAQ展開效果菜單,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
astinus開發(fā)過程中，我自己就在不斷的使用。有次貼了一些JS代碼進去，于是頁面顯示錯誤。顯然，把源代碼直接放進html文本了——好吧，從05年轉(zhuǎn)去做網(wǎng)游以后，一直沒有正經(jīng)的做過web了。2009-07-07
在表單的輸入驗證中，經(jīng)常要當用戶沒能正確輸入后，要提示“XXXX輸入錯誤”這一類的信息，如何能搞到動態(tài)一點呢，今天發(fā)現(xiàn)jquery中的一個不錯的效果，筆記之。2010-08-08
jquery怎樣實現(xiàn)ajax聯(lián)動框(二)
ajax聯(lián)動框想必大家早有所耳聞，接下來將介紹jquery實現(xiàn)另一種形式的聯(lián)動框，右邊的聯(lián)動框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你2013-03-03
網(wǎng)上常見的應用，用jQuery實現(xiàn)起來比較簡單，只有幾行代碼。2011-03-03
這篇文章主要介紹了jQuery多個input求和的實現(xiàn)方法,涉及jQuery獲取input表單元素值及運算的相關技巧,需要的朋友可以參考下2015-02-02