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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
angularjs性能优化的方法
Sep 05 Javascript
vue子路由跳转实现tab选项卡
Jul 24 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
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python多图片合并PDF的方法
2019/01/03 Python
一行python实现树形结构的方法
2019/08/09 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
创业计划书模版
2014/02/05 职场文书
运动会入场口号
2014/06/07 职场文书
商务司机岗位职责
2015/04/10 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫