我发现queue() / dequeue()上的jQuery.com文档太简单了。 jQuery中的队列到底是什么？我应该如何使用它们？

#1楼

它允许您将动画排队...例如，代替此

$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);

其衰元件并且使得在同一时间宽度100像素。使用队列可以登台动画。因此，一个接一个地完成。

$("#show").click(function () {var n = $("div").queue("fx");$("span").text("Queue length is: " + n.length);
});function runIt() {$("div").show("slow");$("div").animate({left:'+=200'},2000);$("div").slideToggle(1000);$("div").slideToggle("fast");$("div").animate({left:'-=200'},1500);$("div").hide("slow");$("div").show(1200);$("div").slideUp("normal", runIt);
}
runIt();

来自http://docs.jquery.com/Effects/queue的示例

#2楼

要了解队列方法，您必须了解jQuery如何进行动画处理。如果您一个接一个地编写多个动画方法调用，那么jQuery将创建一个“内部”队列并将这些方法调用添加到该队列中。然后，它一一运行那些动画调用。

考虑以下代码。

function nonStopAnimation()
{//These multiple animate calls are queued to run one after//the other by jQuery.//This is the reason that nonStopAnimation method will return immeidately//after queuing these calls. $('#box').animate({ left: '+=500'}, 4000);$('#box').animate({ top: '+=500'}, 4000);$('#box').animate({ left: '-=500'}, 4000);//By calling the same function at the end of last animation, we can//create non stop animation. $('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation);
}

使用“队列” /“出队”方法，您可以控制此“动画队列”。

默认情况下，动画队列的名称为“ fx”。我在这里创建了一个示例页面，其中包含各种示例，这些示例将说明如何使用队列方法。

http://jsbin.com/zoluge/1/edit?html，输出

以上示例页面的代码：

$(document).ready(function() {$('#nonStopAnimation').click(nonStopAnimation);$('#stopAnimationQueue').click(function() {//By default all animation for particular 'selector'//are queued in queue named 'fx'.//By clearning that queue, you can stop the animation.$('#box').queue('fx', []);});$('#addAnimation').click(function() {$('#box').queue(function() {$(this).animate({ height : '-=25'}, 2000);//De-queue our newly queued function so that queues//can keep running.$(this).dequeue();});});$('#stopAnimation').click(function() {$('#box').stop();});setInterval(function() {$('#currentQueueLength').html('Current Animation Queue Length for #box ' + $('#box').queue('fx').length);}, 2000);
});function nonStopAnimation()
{//These multiple animate calls are queued to run one after//the other by jQuery.$('#box').animate({ left: '+=500'}, 4000);$('#box').animate({ top: '+=500'}, 4000);$('#box').animate({ left: '-=500'}, 4000);$('#box').animate({ top: '-=500'}, 4000, nonStopAnimation);
}

现在您可能会问，为什么我要打扰这个队列？通常，你不会。但是，如果您要控制复杂的动画序列，那么队列/出队方法是您的朋友。

另请参阅关于jQuery组的有关创建复杂动画序列的有趣对话。

http://groups.google.com/group/jquery-zh-CN/browse_thread/thread/b398ad505a9b0512/f4f3e841eab5f5a2?lnk=gst

动画演示：

http://www.exfer.net/test/jquery/tabslide/

让我知道您是否还有问题。

#3楼

函数makeRed和makeBlack使用queue和dequeue来相互执行。效果是，“＃wow”元素连续闪烁。

<html><head><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function(){$('#wow').click(function(){$(this).delay(200).queue(makeRed);});});function makeRed(){$('#wow').css('color', 'red');$('#wow').delay(200).queue(makeBlack);$('#wow').dequeue();}function makeBlack(){$('#wow').css('color', 'black');$('#wow').delay(200).queue(makeRed);$('#wow').dequeue();}</script></head><body><div id="wow"><p>wow</p></div></body>
</html>

#4楼

jQuery `.queue()`和`.dequeue()`

jQuery中的队列用于动画。您可以将它们用于任何您喜欢的目的。它们是使用jQuery.data()在每个元素的基础上存储的函数数组 。它们是先进先出（FIFO）。您可以通过调用.queue()将函数添加到队列中，然后使用.dequeue()删除（通过调用）函数。

要了解内部jQuery队列功能，阅读源代码和查看示例将对我有很大帮助。我见过的队列函数的最佳示例之一是.delay() ：

$.fn.delay = function( time, type ) {time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;type = type || "fx";return this.queue( type, function() {var elem = this;setTimeout(function() {jQuery.dequeue( elem, type );}, time );});
};

默认队列`fx`

jQuery中的默认队列是fx 。默认队列具有一些特殊属性，这些属性不与其他队列共享。

自动启动：调用$(elem).queue(function(){}); 如果队列尚未启动， fx队列将自动使下一个函数dequeue并运行它。
“ inprogress”哨兵：每当您从fx队列dequeue()函数dequeue() ，它将unshift() （将其推入数组的第一个位置）字符串"inprogress" -表示当前正在运行队列。
这是默认值！ .animate()和默认情况下调用它的所有函数都使用fx队列。

注意：如果使用的是自定义队列，则必须手动.dequeue()函数，它们不会自动启动！

检索/设置队列

您可以通过调用不带函数参数的.queue()来检索对jQuery队列的引用。如果要查看队列中有多少个项目，可以使用该方法。您可以使用push ， pop ， unshift ， shift来操纵队列。您可以通过将数组传递给.queue()函数来替换整个队列。

快速示例：

// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3));

动画（ `fx` ）队列示例：

在jsFiddle上运行示例

$(function() {// lets do something with google maps:var $map = $("#map_canvas");var myLatlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};var geocoder = new google.maps.Geocoder();var map = new google.maps.Map($map[0], myOptions);var resized = function() {// simple animation callback - let maps know we resizedgoogle.maps.event.trigger(map, 'resize');};// wait 2 seconds$map.delay(2000);// resize the div:$map.animate({width: 250,height: 250,marginLeft: 250,marginTop:250}, resized);// geocode something$map.queue(function(next) {// find stackoverflow's whois address:geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse);function handleResponse(results, status) {if (status == google.maps.GeocoderStatus.OK) {var location = results[0].geometry.location;map.setZoom(13);map.setCenter(location);new google.maps.Marker({ map: map, position: location });}// geocoder result returned, continue with animations:next();}});// after we find stack overflow, wait 3 more seconds$map.delay(3000);// and resize the map again$map.animate({width: 500,height: 500,marginLeft:0,marginTop: 0}, resized);
});

另一个自定义队列示例

在jsFiddle上运行示例

var theQueue = $({}); // jQuery on an empty object - a perfect queue holder$.each([1,2,3],function(i, num) {// lets add some really simple functions to a queue:theQueue.queue('alerts', function(next) { // show something, and if they hit "yes", run the next function.if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {next();}});
});// create a button to run the queue:
$("<button>", {text: 'Run Queue', click: function() { theQueue.dequeue('alerts'); }
}).appendTo('body');// create a button to show the length:
$("<button>", {text: 'Show Length', click: function() { alert(theQueue.queue('alerts').length); }
}).appendTo('body');

排队Ajax呼叫：

我开发了一个$.ajaxQueue()插件，该插件使用$.Deferred ， .queue()和$.ajax()来传递一个在请求完成后已解决的承诺。我对Sequencing Ajax Requests的回答中发布了仍可在1.4中使用的$.ajaxQueue另一个版本。

/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});$.ajaxQueue = function( ajaxOpts ) {var jqXHR,dfd = $.Deferred(),promise = dfd.promise();// queue our ajax requestajaxQueue.queue( doRequest );// add the abort methodpromise.abort = function( statusText ) {// proxy abort to the jqXHR if it is activeif ( jqXHR ) {return jqXHR.abort( statusText );}// if there wasn't already a jqXHR we need to remove from queuevar queue = ajaxQueue.queue(),index = $.inArray( doRequest, queue );if ( index > -1 ) {queue.splice( index, 1 );}// and then reject the deferreddfd.rejectWith( ajaxOpts.context || ajaxOpts,[ promise, statusText, "" ] );return promise;};// run the actual queryfunction doRequest( next ) {jqXHR = $.ajax( ajaxOpts ).done( dfd.resolve ).fail( dfd.reject ).then( next, next );}return promise;
};})(jQuery);

我现在将其添加为learn.jquery.com上的文章，该网站上还有其他关于队列的出色文章，请看看。

#5楼

这个线程对我的问题有很大帮助，但是我以不同的方式使用$ .queue，并认为我会在这里发表我的想法。我需要的是要触发的一系列事件（框架），但是要动态构建该序列。我有不同数量的占位符，每个占位符应包含动画序列的图像。数据保存在数组数组中，因此我遍历数组以为每个占位符构建每个序列，如下所示：

/* create an empty queue */
var theQueue = $({});
/* loop through the data array */
for (var i = 0; i < ph.length; i++) {for (var l = 0; l < ph[i].length; l++) {/* create a function which swaps an image, and calls the next function in the queue */theQueue.queue("anim", new Function("cb", "$('ph_"+i+"' img').attr('src', '/images/"+i+"/"+l+".png');cb();"));/* set the animation speed */theQueue.delay(200,'anim');}
}
/* start the animation */
theQueue.dequeue('anim');

这是我到达的脚本的简化版本，但是应该显示出原理-将函数添加到队列时，使用Function构造函数添加该函数-这样，可以使用循环中的变量动态编写函数（ s）。注意将函数传递给next（）调用参数的方式，并在最后调用该参数。这种情况下的函数没有时间依赖性（它不使用$ .fadeIn或类似的东西），所以我使用$ .delay交错帧。

#6楼

队列中的多个对象动画

这是队列中多个对象动画的简单示例。

jQuery使我们只能对一个对象进行排队。但是在动画功能中，我们可以访问其他对象。在此示例中，我们在#q对象上设置队列，同时为＃box1和＃box2对象设置动画。

将队列视为函数数组。因此，您可以将队列作为数组进行操作。您可以使用推入，弹出，不移位，移位来操纵队列。在此示例中，我们从动画队列中删除了最后一个函数，并将其插入到开头。

完成后，我们通过dequeue（）函数启动动画队列。

见jsFiddle

的HTML：

  <button id="show">Start Animation Queue</button><p></p><div id="box1"></div><div id="box2"></div><div id="q"></div>

js：

$(function(){$('#q').queue('chain',function(next){  $("#box2").show("slow", next);});$('#q').queue('chain',function(next){  $('#box1').animate({left: 60}, {duration:1000, queue:false, complete: next})});    $('#q').queue('chain',function(next){  $("#box1").animate({top:'200'},1500, next);});$('#q').queue('chain',function(next){  $("#box2").animate({top:'200'},1500, next);});$('#q').queue('chain',function(next){  $("#box2").animate({left:'200'},1500, next);});//notice that show effect comes last$('#q').queue('chain',function(next){  $("#box1").show("slow", next);});});$("#show").click(function () {$("p").text("Queue length is: " + $('#q').queue("chain").length);// remove the last function from the animation queue.var lastFunc = $('#q').queue("chain").pop();// insert it at the beginning:    $('#q').queue("chain").unshift(lastFunc);//start animation queue$('#q').dequeue('chain');
});

CSS：

        #box1 { margin:3px; width:40px; height:40px;position:absolute; left:10px; top:60px; background:green; display: none; }#box2 { margin:3px; width:40px; height:40px;position:absolute; left:100px; top:60px; background:red; display: none; }p { color:red; }

jQuery中的队列是什么？相关推荐

Jquery中的队列函数quene()、dequene()、clearQuene()
jQuery中的 queue 和 dequeue 是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用.特别 animate 动画, ajax ,以及 timeout 等需要一定时间的函数. ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
JQuery中的queue()及dequeue()
本文实例讲述了jQuery中queue()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够显示或者操作在匹配元素上执行的函数队列. 此方法可能用的并不是太频繁,但是却非常的重要,下面就结合实 ...
45 jQuery中的常用API
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery基础选择器原生JS获取元素的方式很多.很杂,而且兼容性情况不一致.因此, ...
jQuery中的动画
一.基本动画 1.show()方法和hide()方法:改变display属性为一个元素调用hide()方法,会将该元素的display样式改为"display:none". $( ...
jquery中动画效果的函数
在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueu ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
深入解析jQuery中的延时对象的概念
首先我们需要明白延时对象有什么用? 第一个作用,解决时序以及动态添加执行函数的问题. function a(){alert(1)}; function b(){alert(2)}; function ...
jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法] 1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于 ...

jQuery中的队列是什么？

#1楼

#2楼

#3楼

#4楼

jQuery `.queue()`和`.dequeue()`

默认队列`fx`

检索/设置队列

动画（ `fx` ）队列示例：

另一个自定义队列示例

排队Ajax呼叫：

#5楼

#6楼

队列中的多个对象动画

jQuery中的队列是什么？相关推荐

最新文章

热门文章

jQuery中的队列是什么？

#1楼

#2楼

#3楼

#4楼

jQuery .queue()和.dequeue()

默认队列fx

检索/设置队列

动画（ fx ）队列示例：

另一个自定义队列示例

排队Ajax呼叫：

#5楼

#6楼

队列中的多个对象动画

jQuery中的队列是什么？相关推荐

最新文章

热门文章

jQuery `.queue()`和`.dequeue()`

默认队列`fx`

动画（ `fx` ）队列示例：