jQuery队列控制方法详解queue()/dequeue()/clearQueue()


Posted in Javascript onDecember 02, 2010

先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.

dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO

jQuery队列控制方法详解queue()/dequeue()/clearQueue()

css与html部分我就不贴出来了,DEMO演示中有. 若按常规做法, 可能需要用如下jQ代码来实现:

$('.one').delay(500).animate({top:'+=270px'},500,function(){
		$('.two').delay(500).animate({top:'+=270px'},500,function(){
			$('.three').delay(500).animate({top:'+=270px'},500,function(){
				$('.four').delay(500).animate({top:'+=270px'},500,function(){
					$('.five').delay(500).animate({top:'+=270px'},500,function(){
						$('.six').delay(500).animate({top:'+=270px'},500,function(){
							$('.seven').animate({top:'+=270px'},500,function(){
								alert('按序落体运动结束! Yeah!')
							});
						});
					});
				});
			});
		});
	});

嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:

var _slideFun=[
	function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
		alert('按序落体运动结束! Yeah!');
	});}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
	$('#demo').dequeue('slideList');
};
_takeOne();

这样一来, 看起来是不是简明多了. 如何实现?
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
DEMO演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.
至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).

Javascript 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 Javascript
JQuery 弹出框定位实现方法
Dec 02 #Javascript
Jquery replace 字符替换实现代码
Dec 02 #Javascript
jquery json 实例代码
Dec 02 #Javascript
JavaScript格式化数字的函数代码
Nov 30 #Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 #Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 #Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 #Javascript
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python中set与frozenset方法和区别详解
2016/05/23 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python学生管理系统开发
2019/01/30 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
python实现微信防撤回神器
2019/04/29 Python
解析Python3中的Import
2019/10/13 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python Shapely使用指南详解
2020/02/18 Python
用python对oracle进行简单性能测试
2020/12/05 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
初三物理教学反思
2014/01/21 职场文书
无传销社区工作方案
2014/05/13 职场文书
思想品德评语大全
2014/12/31 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python