微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery中队列queue()函数的实例教程

如果当前jQuery对象匹配多个元素:获取队列时,只获取一个匹配元素上的队列;设置队列(替换队列、追加函数)时,则为每个匹配元素都分别进行设置。 该函数属于jQuery对象(实例)。如果需要移除并执行队列中的第一个函数,请使用dequeue()函数。你也可以使用clearQueue()函数清空指定的队列。

语法

jQuery 1.2 新增该函数。queue()函数具有如下两种用法

用法一:

rush:js;"> jQueryObject.queue( [ queueName ] [,newQueue ] )

如果没有指定任何参数或只指定了queueName参数,则表示获取指定名称函数队列。如果指定了newQueue参数,则表示使用新的队列newQueue设置(替换)当前队列中的所有内容

用法二:

rush:js;"> 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()函数,来把你需要的某些代码插入到某个队列中

rush:js;"> $('#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. 自定义队列

rush:js;"> $("div").queue("custom",function(next) { $('div').css({'background':'red'}); next(); });

但就这段代码而已,待你真正添加进网页,并且尝试运行,会发现并非“所见即所得”,压根就不会有任何效果

修改后:

rush:js;"> $("div").queue("custom",function(next) { $('div').css({'background':'red'}); next(); }) .dequeue("custom"); //this is the key

一般对与dequeue()的定义是“删除队列中最顶部的函数,并且执行它”。我并不赞同用“删除”这个字眼,而是倾向于“取出”,其实这个函数功能就好像是一个数据结构中队列的指针,待队列中前一个函数执行完后,取下一个队列最顶端的函数

3. queue: false

rush:js;"> $("#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

rush:js;"> $('#section3a').slideUp(1000) .slideDown(1000) .animate({width: '50px'},queue: false});

4. 获取队列长度

比如用队列名取得匹配元素的长度:

rush:js;"> var $queue=$("div").queue('fx');

很明显,就是取得队列名为'fx'的队列,如果想取得长度的话:

rush:js;"> var $length=$('div').queue('fx').length;

注意这里的队列长度只是匹配元素还未运行的队列长度,当动画运行完之后,队列长度会自动归为0

5.替换队列

rush:js;"> $('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'

当点击某个按钮时:

rush:js;"> $('input').click(function(){ $('div').queue('fx',fx2); });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐