jQuery中queue()函數列隊的使用實例詳解

這篇文章主要介紹了jQuery中佇列queue()函數的實例教學,queue()函數為JavaScript函數的執行順序控制操作提供了便利,需要的朋友可以參考下

如果當前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. 自訂隊列

$("p").queue("custom", function(next) {
  $('p').css({'background':'red'});
  next();
});

但就這段程式碼而已，待你真正加入網頁，並且嘗試運行，會發現並非“所見即所得”，壓根就不會有任何效果。

修改後：

$("p").queue("custom", function(next) {
  $('p').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=$("p").queue('fx');

很明顯，就是取得隊列名為'fx'的隊列，如果想取得長度的話：

var $length=$('p').queue('fx').length;

注意這裡的隊列長度只是匹配元素還未運行的隊列長度，當動畫運行完之後，隊列長度會自動歸為0

5.替換隊列

$('p').queue('fx',function(){
    $('p').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('p').queue('fx2',function(){
    $('p').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定义fx2

這裡定義了兩個隊列，一個是慢隊列,也就是預設的'fx',另一個是快隊列'fx2 '

當點擊某個按鈕時：

$('input').click(function(){
  $('p').queue('fx',fx2);
});

以上是jQuery中queue()函數列隊的使用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！