jQuery 动画队列

Question

我陷入了困境，所以希望 jQuery 专家能够提供帮助。

我的页面上总共有 10 个元素（实际上是小图像）。我需要像这样对它们进行动画处理：

1. 前 2 个显示
2. ，然后下 2 个显示
3. ，然后下 3 个显示
4. ，然后下一个 1 显示
5. ，最后 2 个显示

所以，我为每个显示添加了属性 (sequence_num = "1 “（或 2 或 3 等），因此我可以通过 $() 轻松选择使用 animate() 函数对哪些动画进行动画处理。）

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

我遇到的问题是如何延迟动画，以便在下一组开始之前对正确的对象组进行动画处理。我已经尝试过 animate() 函数的队列参数，但这似乎不适用于我想要做的事情。

有人有这方面的经验吗？

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();

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

Answer 2

$(function() {
        $('#start').click(function() {

            $('#first, #second').fadeIn(1000, function() {

                $('#third, #forth').fadeIn(500, function() {

                    $('#fifth, #sixth, #seventh').fadeIn(750, function() {

                        $('#eight').fadeIn(800, function() {

                            $('#ninth, #tenth').fadeIn('slow');

                        });
                    });
                });

            });

        });
    });

Answer 3

在这种情况下，使用可以提供给 animate() 的回调函数而不是内置队列可能会更容易。动画结束时会调用回调，因此当调用它时，会找到下一个元素并对它们进行动画处理，依此类推，直到元素用完。