jQuery 遍歷 - jQuery.queue() 方法

實(shí)例

顯示隊(duì)列的長度：

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

親自試一試

定義和用法

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

注釋：這是底層級(jí)的方法；使用 .queue() 更加方便。

語法

.queue(queueName)

操作隊(duì)列

queue() 方法操作在匹配元素上執(zhí)行的函數(shù)隊(duì)列。

語法

.queue(queueName,newQueue)

詳細(xì)說明

每個(gè)元素均可擁有一到多個(gè)由 jQuery 添加的函數(shù)隊(duì)列。在大多數(shù)應(yīng)用程序中，只使用一個(gè)隊(duì)列（名為 fx）。隊(duì)列運(yùn)行在元素上異步地調(diào)用動(dòng)作序列，而不會(huì)終止程序執(zhí)行。典型例子時(shí)調(diào)用元素上的多個(gè)動(dòng)畫方法。例如：

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

當(dāng)這條語句執(zhí)行時(shí)，元素會(huì)立即開始其滑動(dòng)動(dòng)畫，但是淡入過渡被置于 fx 隊(duì)列，只有當(dāng)滑動(dòng)過渡完成后才會(huì)被調(diào)用。

.queue() 方法允許我們直接對(duì)這個(gè)函數(shù)隊(duì)列進(jìn)行操作。調(diào)用帶有回調(diào)函數(shù)的 .queue() 方法特別有用；它允許我們?cè)陉?duì)列末端放置一個(gè)新函數(shù)。

這個(gè)特性與動(dòng)畫方法提供回調(diào)函數(shù)類似，但是無需在動(dòng)畫執(zhí)行時(shí)設(shè)置回調(diào)函數(shù)。

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

等價(jià)于：

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

請(qǐng)注意，當(dāng)通過 .queue() 添加函數(shù)時(shí)，我們應(yīng)當(dāng)確保最終調(diào)用了 .dequeue()，這樣下一個(gè)排隊(duì)的函數(shù)才能執(zhí)行。

例子 1

對(duì)自定義函數(shù)進(jìn)行隊(duì)列操作：

$(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è)置隊(duì)列數(shù)組來刪除隊(duì)列：

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

親自試一試