實例
顯示隊列的長度:
function showIt() {
var n = div.queue("fx")
;
$("span").text( n.length );
setTimeout(showIt, 100);
}
定義和用法
queue() 方法顯示或操作在匹配元素上執(zhí)行的函數(shù)隊列。
語法
.queue(queueName)
參數(shù) | 描述 |
---|---|
queueName | 可選。字符串值,包含序列的名稱。默認是 fx, 標準的效果序列。 |
操作隊列
queue() 方法操作在匹配元素上執(zhí)行的函數(shù)隊列。
語法
.queue(queueName,newQueue)
參數(shù) | 描述 |
---|---|
queueName | 可選。字符串值,包含序列的名稱。默認是 fx, 標準的效果序列。 |
詳細說明
每個元素均可擁有一到多個由 jQuery 添加的函數(shù)隊列。在大多數(shù)應用程序中,只使用一個隊列(名為 fx)。隊列運行在元素上異步地調(diào)用動作序列,而不會終止程序執(zhí)行。典型例子時調(diào)用元素上的多個動畫方法。例如:
$('#foo').slideUp().fadeIn();
當這條語句執(zhí)行時,元素會立即開始其滑動動畫,但是淡入過渡被置于 fx 隊列,只有當滑動過渡完成后才會被調(diào)用。
.queue() 方法允許我們直接對這個函數(shù)隊列進行操作。調(diào)用帶有回調(diào)函數(shù)的 .queue() 方法特別有用;它允許我們在隊列末端放置一個新函數(shù)。
這個特性與動畫方法提供回調(diào)函數(shù)類似,但是無需在動畫執(zhí)行時設置回調(diào)函數(shù)。
$('#foo').slideUp();
$('#foo').queue(function() {
alert('Animation complete.');
$(this).dequeue();
})
;
等價于:
$('#foo').slideUp(function() { alert('Animation complete.'); });
請注意,當通過 .queue() 添加函數(shù)時,我們應當確保最終調(diào)用了 .dequeue(),這樣下一個排隊的函數(shù)才能執(zhí)行。
例子 1
對自定義函數(shù)進行隊列操作:
$(document.body).click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); })
; $("div").animate({left:'-=200'},500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); })
; $("div").slideUp(); });
例子 2
設置隊列數(shù)組來刪除隊列:
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
});
更多建議: