# jQuery 遍歷 - queue() 方法 ## 實例 顯示隊列的長度： ``` function showIt() { var n = div.queue("fx"); $("span").text( n.length ); setTimeout(showIt, 100); } ``` ## 定義和用法 queue() 方法顯示或操作在匹配元素上執行的函數隊列。 ### 語法 ``` .queue(_queueName_) ``` | 參數 | 描述 | | --- | --- | | _queueName_ | 可選。字符串值，包含序列的名稱。默認是 fx, 標準的效果序列。 | ## 操作隊列 queue() 方法操作在匹配元素上執行的函數隊列。 ### 語法 ``` .queue(_queueName_,_newQueue_) ``` | 參數 | 描述 | | --- | --- | | _queueName_ | 可選。字符串值，包含序列的名稱。默認是 fx, 標準的效果序列。 | ### 詳細說明 每個元素均可擁有一到多個由 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(); }); ```