嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让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()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).
您可能感兴趣的文章: