jQuery中队列queue()函数的实例教程
如果当前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);
});
相关文章
这篇文章主要介绍了jquery提示效果,以一个简单实例较为详细的分析了jQuery提示效果的实现方法与相关注意事项,具有一定的参考借鉴价值,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了jQuery Chosen通用初始化,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的2012-10-10
这篇文章主要介绍了jQuery创建DOM元素的方法,实例分析了jQuery使用$直接创建DOM元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery实现仿腾讯视频列表分页效果的方法,涉及jquery页面元素的运算与动态调用技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了Jquery使我们简化了禁止冒泡事件的操作，只需几行代码,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery实现鼠标划过修改样式的方法,涉及jQuery针对鼠标事件及样式操作的技巧,是jQuery鼠标事件的典型应用,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了jquery css实现Tab栏切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了jQuery中:enabled选择器用法,实例分析了:enabled选择器的功能、定义及选取所有可用元素的使用技巧,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇Spring MVC中Ajax实现二级联动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论