×

解析基于jQuery的queue()函数应用

作者:admin2017.12.13来源:Web前端之家浏览:2793评论:0
关键词:queue()
微信公众号

微信公众号

好些天没更新博客文章了,去日本-北海道溜达了一个星期,感觉太爽了,冰天雪地,零下7°左右的气温,让你绝对爽歪歪。

去日本旅游最值得推荐的就是北海道,风景好、舒适、干净卫生,安静,尤其对于那些没怎么见过雪的人,值得一游。

QQ图片20171213174409.jpg

来点福利,这个清爽日本妹子是我目前看到最漂亮的。好吧不多说了,回到文章话题。

大家都知道,实现一种效果可以使用多种方法,比如当我们匹配元素时候,你会用到queue()函数吗?或许你用了其他的方法,但是我们今天主题是:用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()函数只以其中第一个匹配的元素为准。

实例:

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');
});

自定义队列

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

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});

获取队列长度

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

var $queue=$("div").queue('fx');

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

var $length=$('div').queue('fx').length;

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

替换队列

$('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);
});
温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/queueHanshu.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

  • admin

    可以啊,请加群私聊。...

  • 访客

    换链接:http://davin.xin/pc/navigation...

  • 访客

    alert('哈哈')...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero