DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery教程:queue和dequeue不同之處
jQuery教程:queue和dequeue不同之處
編輯:關於JavaScript     

定義和用法
queue() 方法顯示或操作在匹配元素上執行的函數隊列。
queue和dequeue的過程主要是:
1,用queue把函數加入隊列(通常是函數數組)
2,用dequeue將函數數組中的第一個函數取出,並執行(用shift()方法取出並執行)

也就意味著當再次執行dequeue的時候,得到的是另一個函數了
同時也意味著,如果不執行dequeue,那麼隊列中的下一個函數永遠不會執行

對於一個元素上執行animate方法加動畫,jQuery內部也會將其加入名為 fx 的函數隊列
而對於多個元素要依次執行動畫,則必須我們手動設置隊列進行了。

一個例子,要兩個div依次向左移動,點擊這裡查看
如果只是輪流移動次數較少,可以使用animate的回調函數來做,一個動畫放在另一個動畫的回調裡邊
比如

$(“#block1″).animate({left:”+=100″},function() {
$(“#block2″).animate({left:”+=100″},function() {
$(“#block1″).animate({left:”+=100″},function() {
$(“#block2″).animate({left:”+=100″},function() {
$(“#block1″).animate({left:”+=100″},function(){
alert(“動畫結束”);
});
});
});
});
});

但這種方法當動畫較多的時候簡直是殘忍。

此時利用queue和dequeue則顯得簡單很多:

var FUNC=[
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function(){alert("動畫結束")}
];
var aniCB=function() {
$(document).dequeue(“myAnimation”);
}
$(document).queue(“myAnimation”,FUNC);
aniCB();

1,我首先建立了一個函數數組,裡邊是一些列需要依次執行的動畫
2,然後我定義了一個回調函數,用dequeue方法用來執行隊列中的下一個函數
3,接著把這個函數數組放到document上的myAnimation的隊列中(可以選擇任何元素,我只是為了方便而把這個隊列放在document上)
4,最後我開始執行隊列中的第一個函數

這樣做的好處在於函數數組是線性展開,增減起來非常方便。
而且,當不要要繼續進行接下來動畫的時候(比如用戶點了某個按鈕),只需要清空那個隊列即可。而要增加更多則只需要加入隊列即可

//清空隊列
$(document).queue(“myAnimation”,[]);
//加一個新的函數放在最後
$(document).queue(“myAnimation”,function(){alert(“動畫真的結束了!”)});

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved