jQuery 遍歷 queue() 方法

jQuery 參考手冊 數據

queue() 方法顯示或操作在匹配元素上執行的函數隊列。

1. 語法

.queue(queueName)

2. 范例

顯示隊列的長度：

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

3. 操作隊列

queue() 方法操作在匹配元素上執行的函數隊列。

語法

.queue(queueName,newQueue)

詳細說明

每個元素均可擁有一到多個由 jQuery 添加的函數隊列。在大多數應用程序中，只使用一個隊列（名為 fx）。隊列運行在元素上異步地調用動作序列，而不會終止程序執行。典型例子時調用元素上的多個動畫方法。例如：

$('#foo').slideUp().fadeIn();

當這條語句執行時，元素會立即開始其滑動動畫，但是淡入過渡被置于 fx 隊列，只有當滑動過渡完成后才會被調用。

.queue() 方法允許我們直接對這個函數隊列進行操作。調用帶有回調函數的 .queue() 方法特別有用；它允許我們在隊列末端放置一個新函數。

這個特性與動畫方法提供回調函數類似，但是無需在動畫執行時設置回調函數。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

等價于：

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

請注意，當通過 .queue() 添加函數時，我們應當確保最終調用了 .dequeue()，這樣下一個排隊的函數才能執行。

例子 1

對自定義函數進行隊列操作：

$(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

設置隊列數組來刪除隊列：

$("#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();
});

jQuery 參考手冊 數據