javascript - 为 DIV 动画添加延迟

Question

我正在尝试逐步创建 div 框，并在按下按钮时为它们设置几次动画。我有一个正在运行的代码，一切都很顺利。它向右移动到终端主机，然后再次向左移动到其原始位置。这主要是我做的，也可以在这里找到演示:http://jsfiddle.net/54hqm/3/

现在我想在每次点击后发生，基本上是一个接一个地移动每个 DIV，有延迟，而不是一次移动整个 DIV 堆栈。我不知道该怎么办。谁能帮我解决这个问题？

$(document).ready(function () {

    var count = 0;
    var items = 0;
    var packetNumber = 0;
    var speed = 0;
    $("button").click(function () {

        if (count < 4) {
            items = items + 1;
            count++;
        } else {
            items = items * 2;
        }

        speed = $("#speed").val();
        createDivs(items);
        animateDivs();
    });

    function createDivs(divs) {
        packetNumber = 1;
        var left = 60;
        for (var i = 0; i < divs; i++) {
            var div = $("<div class='t'></div>");
            div.appendTo(".packets");
            $("<font class='span'>" + packetNumber + "</font>").appendTo(div);
            packetNumber++;
            div.css("left",left+"px");

            div.hide();
            left += 20;
        }
    }

    function animateDivs() {
        $(".t").each(function () {
            var packet = $(this);

            packet.show();

            packet.animate({
                left: '+=230px'
            }, speed);

            packet.animate({
                left: '+=230px'
            }, speed);

            packet.animate({
                top: '+=20px',
                backgroundColor: "#f09090",
                text: '12'
            }, speed / 4, "swing", function () {

                $('.span').fadeOut(100, function () {

                    $(this).text(function () {
                        return 'a' + $(this).text().replace('a', '');
                    }).fadeIn(100);

                });

            });
            packet.delay(1000).animate({left:'-=230px'}, speed);
            packet.animate({left:'-=230px'}, speed);
        }).promise().done(function(){
        $(".packets").empty();});

    }
});

Answer 1

您可以通过 2 个小修改来实现:

1. 在您的 each() 函数中，添加 index 参数以了解当前动画数据包的索引:

   $(".t").each(函数(索引){

2. 在您的 animate 调用之前，插入一个 packet.delay()，每个项目的延迟都会增加:

   packet.delay(index * 250);

我更新了你的 fiddle显示结果。
更新:我做了一个second version根据您的评论。