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

如果當前jQuery對象匹配多個元素：獲取隊列時，只獲取第一個匹配元素上的隊列；設置隊列(替換隊列、追加函數(shù))時，則為每個匹配元素都分別進行設置。

該函數(shù)屬于jQuery對象(實例)。如果需要移除并執(zhí)行隊列中的第一個函數(shù)，請使用dequeue()函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊列。

語法

jQuery 1.2 新增該函數(shù)。queue()函數(shù)具有如下兩種用法：

用法一：

jQueryObject.queue( [ queueName ] [, newQueue ] )

如果沒有指定任何參數(shù)或只指定了queueName參數(shù)，則表示獲取指定名稱的函數(shù)隊列。如果指定了newQueue參數(shù)，則表示使用新的隊列newQueue設置(替換)當前隊列中的所有內容。

用法二：

jQueryObject.queue( [ queueName ,] callback )

將指定的函數(shù)添加到指定的隊列(末尾)。

注意：queue()函數(shù)的所有設置操作針對當前jQuery對象所匹配的每一個元素；所有讀取操作只針對第一個匹配的元素。

參數(shù)

請根據(jù)前面語法部分所定義的參數(shù)名稱查找對應的參數(shù)。

queueName：可選/String類型指定的隊列名稱，默認為"fx"(表示jQuery中的標準動畫效果隊列)。

newQueue：可選/Array類型用于替換當前隊列內容的新隊列。

callback：Function類型指定的函數(shù)，將會追加到隊列中。該函數(shù)有一個函數(shù)參數(shù)，調用該參數(shù)可以移除并執(zhí)行隊列中的第一個函數(shù)。

返回值

queue()函數(shù)的返回值是Array/jQuery類型，返回值的類型取決于當前queue()函數(shù)執(zhí)行的是獲取操作還是設置操作。

如果queue()函數(shù)執(zhí)行的是設置操作(替換隊列、追加函數(shù))，則返回當前jQuery對象本身；如果是獲取操作，則返回獲取到的函數(shù)隊列(數(shù)組)。

如果當前jQuery對象匹配多個元素，讀取數(shù)據(jù)時，queue()函數(shù)只以其中第一個匹配的元素為準。

實例：

1. jQuery為我們提供了queue()函數(shù)，來把你需要的某些代碼插入到某個隊列中

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

});

但就這段代碼而已，待你真正添加進網(wǎng)頁，并且嘗試運行，會發(fā)現(xiàn)并非“所見即所得”，壓根就不會有任何效果。

修改后：

$("div").queue("custom", function(next) {

  $('div').css({'background':'red'});

  next();

})

.dequeue("custom"); //this is the key

一般對與dequeue()的定義是“刪除隊列中最頂部的函數(shù)，并且執(zhí)行它”。我并不贊同用“刪除”這個字眼，而是傾向于“取出”，其實這個函數(shù)的功能就好像是一個數(shù)據(jù)結構中隊列的指針，待隊列中前一個函數(shù)執(zhí)行完后，取下一個隊列最頂端的函數(shù)。

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”隊列執(zhí)行，而后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);

});