jQuery中queue()函数列队的使用实例详解-js教程-PHP中文网

jQuery中queue()函数列队的使用实例详解

巴扎黑

发布： 2017-06-20 11:24:59

原创

2096人浏览过

这篇文章主要介绍了jquery中队列queue()函数的实例教程,queue()函数为javascript函数的执行顺序控制操作提供了便利,需要的朋友可以参考下

如果当前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()函数，来把你需要的某些代码插入到某个队列中

$(&#39;#test-change1&#39;).toggle(function(){
  $(&#39;#test-object1&#39;).hide(&#39;slow&#39;).queue(function(next){
    $(&#39;#test-object1&#39;).appendTo($(&#39;#test-goal1&#39;));
    next();
  }).show(&#39;slow&#39;);

},function(){
  $(&#39;#test-object1&#39;).hide(&#39;slow&#39;).queue(function(next){
    $(&#39;#test-object1&#39;).appendTo($(&#39;#test-origin1&#39;));
    next();      
  }).show(&#39;slow&#39;);
});

登录后复制

2. 自定义队列

$("p").queue("custom", function(next) {
  $(&#39;p&#39;).css({&#39;background&#39;:&#39;red&#39;});
  next();
});

登录后复制

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

修改后：

$("p").queue("custom", function(next) {
  $(&#39;p&#39;).css({&#39;background&#39;:&#39;red&#39;});
  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

$(&#39;#section3a&#39;).slideUp(1000)
      .slideDown(1000)
      .animate({width: &#39;50px&#39;}, {duration: 1000, queue: false});

登录后复制

4. 获取队列长度
比如用队列名取得匹配元素的长度：

var $queue=$("p").queue(&#39;fx&#39;);

登录后复制

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

var $length=$(&#39;p&#39;).queue(&#39;fx&#39;).length;

登录后复制

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

5.替换队列

$(&#39;p&#39;).queue(&#39;fx&#39;,function(){
    $(&#39;p&#39;).slideDown(&#39;slow&#39;)
         .slideUp(&#39;slow&#39;)
         .animate({left:&#39;+=100&#39;},4000);
});//定义fx
$(&#39;p&#39;).queue(&#39;fx2&#39;,function(){
    $(&#39;p&#39;).slideDown(&#39;fast&#39;)
         .slideUp(&#39;fast&#39;)
         .animate({left:&#39;+=100&#39;},1000);
});//定义fx2

登录后复制

这里定义了两个队列，一个是慢队列,也就是默认的'fx',另一个是快队列'fx2'

当点击某个按钮时：

$(&#39;input&#39;).click(function(){
  $(&#39;p&#39;).queue(&#39;fx&#39;,fx2);
});

登录后复制

以上就是jQuery中queue()函数列队的使用实例详解的详细内容，更多请关注php中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

jQuery中queue()函数列队的使用实例详解