如果當前jQuery物件符合多個元素:取得佇列時,只取得第一個符合元素上的佇列;設定佇列(替換佇列、追加函數)時,則為每個符合元素分別進行設定。
此函數屬於jQuery物件(實例)。如果需要移除並執行佇列中的第一個函數,請使用dequeue()函數。你也可以使用clearQueue()函數來清空指定的佇列。
文法
jQuery 1.2 新增此函數。 queue()函數有下列兩種用法:
用法一:
jQueryObject.queue( [ queueName ] [, newQueue ] )
如果沒有指定任何參數或只指定了queueName參數,則表示取得指定名稱的函數佇列。如果指定了newQueue參數,則表示使用新的佇列newQueue設定(替換)目前佇列中的所有內容。
用法二:
jQueryObject.queue( [ queueName ,] callback )
將指定的函數加入到指定的隊列(末尾)。
注意:queue()函數的所有設定操作針對目前jQuery物件所符合的每一個元素;所有讀取操作只針對第一個符合的元素。
參數
請根據前面語法部分所定義的參數名稱尋找對應的參數。
queueName:可選/String類型指定的佇列名稱,預設為"fx"(表示jQuery中的標準動畫效果佇列)。
newQueue:可選/Array類型用於替換目前隊列內容的新隊列。
callback:Function類型指定的函數,將會追加到佇列中。該函數有一個函數參數,呼叫該參數可以移除並執行佇列中的第一個函數。
回傳值
queue()函數的傳回值是Array/jQuery類型,傳回值的類型取決於目前queue()函數執行的是取得操作還是設定操作。
如果queue()函數執行的是設定操作(替換佇列、追加函數),則傳回目前jQuery物件本身;如果是取得操作,則傳回取得的函數佇列(陣列)。
如果目前jQuery物件符合多個元素,讀取資料時,queue()函數只以其中第一個符合的元素為準。
實例:
1. jQuery為我們提供了queue()函數,來把你需要的某些程式碼插入某個佇列
$('#test-change1').toggle(function(){ $('#test-object1').hide('slow').queue(function(next){ $('#test-object1').appendTo($('#test-goal1')); next(); }).show('slow'); },function(){ $('#test-object1').hide('slow').queue(function(next){ $('#test-object1').appendTo($('#test-origin1')); next(); }).show('slow'); });
2. 自訂隊列
$("div").queue("custom", function(next) { $('div').css({'background':'red'}); next(); });
但就這段程式碼而已,待你真正添加進網頁,並且嘗試運行,會發現並非“所見即所得”,壓根就不會有任何效果。
修改後:
$("div").queue("custom", function(next) { $('div').css({'background':'red'}); next(); }) .dequeue("custom"); //this is the key
一般對與dequeue()的定義是「刪除佇列中最頂端的函數,並且執行它」。我並不同意用“刪除”這個字眼,而是傾向於“取出”,其實這個函數的功能就好像是一個數據結構中隊列的指針,待隊列中前一個函數執行完後,取下一個隊列最頂端的函數。
3. queue: false
$("#object") .delay(1000, "fader") .queue("fader", function(next) { $(this).animate({opacity: 0}, {duration: 1000, queue: false}); next(); }) .dequeue("fader") .animate({top: "-=40"}, {duration: 2000})
前1000毫秒,只有控制高度的「fx」佇列執行,而後1000毫秒,控制不透明度的「fader」佇列和控制高度的「fx」並行。這裡的並行就是queue:false
$('#section3a').slideUp(1000) .slideDown(1000) .animate({width: '50px'}, {duration: 1000, queue: false});
4. 取得隊列長度
例如用隊列名稱取得匹配元素的長度:
var $queue=$("div").queue('fx');
很明顯,就是取得隊列名為'fx'的隊列,如果想取得長度的話:
var $length=$('div').queue('fx').length;
注意這裡的佇列長度只是符合元素還未運行的佇列長度,當動畫運行完之後,佇列長度會自動歸為0
5.替換隊列
$('div').queue('fx',function(){ $('div').slideDown('slow') .slideUp('slow') .animate({left:'+=100'},4000); });//定义fx $('div').queue('fx2',function(){ $('div').slideDown('fast') .slideUp('fast') .animate({left:'+=100'},1000); });//定义fx2
這裡定義了兩個隊列,一個是慢隊列,也就是預設的'fx',另一個是快隊列'fx2'
點擊某個按鈕時:
$('input').click(function(){ $('div').queue('fx',fx2); });