jQuery中隊列queue()函數(shù)的實例教程
如果當前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); });
相關文章
jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果(附demo源碼下載)
這篇文章主要介紹了jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果,可實現(xiàn)仿相冊插件切換效果,并附代碼demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02jquery PrintArea 實現(xiàn)票據(jù)的套打功能(代碼)
下面小編就為大家?guī)硪黄猨query PrintArea 實現(xiàn)票據(jù)的套打功能(代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03基于jquery的獲取mouse坐標插件的實現(xiàn)代碼
用jquery實現(xiàn)的獲取mouse坐標的實現(xiàn)代碼,需要的朋友可以參考下。2010-04-04使用jquery-easyui的布局layout寫后臺管理頁面的代碼詳解
這篇文章主要介紹了使用jquery-easyui的布局layout寫后臺管理頁面的代碼詳解,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06