Question

我正在尝试逐步创建div框，并在按下按钮时将它们动画几次。我有一个正在运行的代码，一切都很顺利。它直接进入endhost，然后再次离开它原来的位置。这主要是我的工作，也可以在这里找到演示：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个小修改来实现这个目标：

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

$(".t").each(function (index) {
在animate来电之前，请插入packet.delay()，每个项目的延迟都会增加：

packet.delay(index * 250);

我更新了您的fiddle以显示结果更新：我根据您的评论提出了second version。

为DIV动画添加延迟

1 个答案: