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


Posted in Javascript onMay 03, 2016

如果当前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);
});
Javascript 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
jquery延迟对象解析
Oct 26 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
vue动态绑定style样式
Apr 20 Vue.js
JavaScript中split与join函数的进阶使用技巧
May 03 #Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 #Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 #Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 #Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 #Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 #Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 #Javascript
You might like
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
PHP在Web开发领域的优势
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
教师工作证明范本
2015/06/12 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
python not运算符的实例用法
2021/06/30 Python
MySQL中order by的执行过程
2022/06/05 MySQL