首頁  >  文章  >  web前端  >  jQuery中佇列queue()函數的實例教學_jquery

jQuery中佇列queue()函數的實例教學_jquery

WBOY
WBOY原創
2016-05-16 15:02:321164瀏覽

如果當前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);
});

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn