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打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php生成动态验证码gif图片
2015/10/19 PHP
js 操作符实例代码
2009/10/24 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
django框架自定义用户表操作示例
2018/08/07 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
学校运动会霸气口号
2014/06/07 职场文书
企业口号大全
2014/06/12 职场文书
销售顾问工作计划书
2014/09/15 职场文书
出租车拒载检讨书
2015/01/28 职场文书
演讲开场白台词大全
2015/05/29 职场文书
秋季运动会加油词
2015/07/18 职场文书