jQuery队列操作方法实例
jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.
先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落. 查看DEMO
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. 初始执行第一个函数.
至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).
相关文章
这篇文章主要介绍了jQuery搜索同辈元素方法,实例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并给出了一个完整的实例进行了总结归纳,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
jquery提供一种操作DOM元素属性的方法: attr(修改和增加DOM元素的属性) 和 removeAttr(移除属性)。2010-12-12
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )，需要的朋友可以参考下。2011-10-10
今天我们要完成的是一个带有遮罩效果（补间动画）的图片走廊jquery插件：jquery.tranzify.js2012-08-08
相信大家都知道jquery.cookie.js是一个轻量级的cookie 插件，可以读取、写入、删除 cookie。下面这篇文章就来给大家简单的介绍下关于jquery.cookie.js的介绍与使用方法，需要的朋友可以参考借鉴，一起来看看吧。2017-02-02
前面我们讲述了jQuery中ajax的load（）方法，小伙伴们反应非常好，今天我们就来讲解下jQuery中Ajax的get、post等方法，希望大家同样能够喜欢。2015-01-01
这篇文章主要介绍了jQuery中:header选择器用法,以实例形式分析了:header选择器的功能、定义及匹配标题元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
用jquery实现的对checkbox和radio控件的美化，非常不错，大家可以通过修改图片来实现更漂亮的效果。2010-11-11
这篇文章主要为大家详细介绍了比较实用的jquery拖动排序,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
jquery插件lazyload.js延迟加载图片的使用方法
lazyload.js是一个基于JQuery的插件，可以用来缓冲加载图片。下面介绍这个插件的使用方法2014-02-02
最新评论