jQuery动画队列

Question

我处于死胡同,所以希望jQuery大师可以提供帮助.

我在页面上总共有10个元素(实际上是小图像).我需要像这样动画它们:

1. 前2出现
2. 然后接下来的2出现
3. 然后接下来的3个出现
4. 然后下一个出现
5. 然后最后2出现了

所以,我已经为每一个添加了属性(sequence_num ="1"(或2或3等),因此我可以通过$()使用animate()函数轻松选择哪些动画.)

我的目标是编写一个执行动画的函数(我可以这样做 - 我想我已经掌握了animate()函数).

我所坚持的是如何延迟动画,以便在下一组开始之前对适当的对象组进行动画处理.我已经尝试了animate()函数的queue参数,但这似乎不适用于我想要做的事情.

有人对这个有经验么？

Answer 1

避免使用回调的巨大"圣诞树",或尝试使用setTimeout正确计时.

var queue = [];

function show_next_in_queue() {
    if (queue.length > 0) {
        queue.shift().show(1000, show_next_in_queue);
    }
}

queue.push($("img.sequence1"));
queue.push($("img.sequence2"));
queue.push($("img.sequence3"));
queue.push($("img.sequence4"));
queue.push($("img.sequence5"));

show_next_in_queue();

这会触发一个又一个动画,并且可以轻松扩展,无需毫秒计算或代码消失在编辑器屏幕的右侧之外.