Question

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

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

前2出现
然后下两个出现
然后接下来的3个出现
然后下一个显示
然后最后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();

这会触发一个又一个动画，并且很容易扩展，没有毫秒计算或代码在编辑器屏幕的右侧消失。

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（）而不是内置队列的回调函数可能更容易。当动画结束时调用回调，所以当它被调用时，找到下一个元素并为它们设置动画，依此类推，直到你的元素用完为止。

jQuery动画队列

3 个答案: