jQuery队列控制方法详解queue()/dequeue()/clearQueue()
来源:互联网 发布:赵帅奥运会比赛数据 编辑:程序博客网 时间:2024/06/08 04:37
jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.
先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落
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!')
});
});
});
});
});
});
});
复制代码代码如下:
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()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).
0 0
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- jQuery队列控制方法详解queue()/dequeue()
- jQuery动画模块源码分析之queue,dequeue,clearQueue方法源码分析
- Qquery 队列动画 queue() dequeue() clearqueue()
- jQuery中queue和dequeue的用法 (juery 队列)
- jQuery queue & dequeue
- JQUERY中QUEUE和DEQUEUE
- jQuery中queue和dequeue
- 队列简要实现,是queue,不是dequeue
- jquery中queue和dequeue函数队列的demo可以直接运行
- jQuery中queue和dequeue的用法
- jQuery中queue和dequeue的用法
- jQuery中queue和dequeue的用法
- 深入理解PHP之:Nginx 与 FPM 的工作机制
- 巩固C语言(九)----静态库文件的生成和使用、劫持技术
- Android ViewDragHelper(1)
- (带源码)Spring mvc整合hibernate
- Android应用程序(APK)的编译打包过程
- jQuery队列控制方法详解queue()/dequeue()/clearQueue()
- Django笔记 CMS框架Mezzanine 1
- MySql 单表查询sql语句(二)
- android RecyclerView布局真的只是那么简单!
- ibatis的isNotNull isNotEmpty isEques
- USB描述符
- 抓包工具大全
- Unity3D优化学习记录
- BIOS工程师第一课 DXE Dispatcher 源代码分析