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 相关文章推荐
Jquery 数组操作大全个人总结
Nov 13 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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网站提速三大“软”招
2006/10/09 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
js实现简单五子棋游戏
2020/05/28 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
行政助理工作职责范本
2014/03/04 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
青奥会口号
2014/06/12 职场文书
班风口号
2014/06/18 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2015年超市工作总结
2015/04/09 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
法院答辩状格式
2015/05/22 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis