Question

我做了一个div，我用jquery制作动画。

循环如下：向右，向下，向左，向下。

按下开始按钮时，第一个div开始动画循环。下一个div以随机间隔附加，下一个div相同。但是当附加第二个div时，整个动画循环变得疯狂。

我想要完成的事情：如果附加了第二个div，则第一个div应该完成它的动画循环。第二个和之后的那个也完成了他们的循环。

你能帮我解决这个问题吗？我应该为类或其他东西添加计数器吗？

（顺便说一句，我在这个jsfiddle中禁用了随机附加代码，所以你可以先看到正确的动画循环。请启用以查看疯狂的效果）

HTML

<div id="arena">
    <div id="start">start</div>
</div>

的jQuery

var counter = 0;

$("#start").on('click', function () {
    $("#arena").append('<div class="b"></div>');
    bbLoop();
    $("#start").hide();
});

function bbLoop() {
    bbRight();
}

function bbLeft() {
    $(".b").animate({
        left: "-=300"
    }, 1500, "swing", bbLeftDown);
}

function bbRight() {
    $(".b").animate({
        left: "+=300"
    }, 1500, "swing", bbRightDown);
}

function bbLeftDown() {
    $(".b").animate({
        bottom: "-=30"
    }, 300, "swing", bbRight);
}

function bbRightDown() {
    $(".b").animate({
        bottom: "-=30"
    }, 300, "swing", bbLeft);
}

/*

function doSomething() {}

(function loop() {
    var rand = Math.round(Math.random() * (3000 - 500)) + 500;
    setTimeout(function () {
        doSomething();
    $("#arena").append('<div class="b"></div>');
        loop();
    }, rand);
}());
*/

Answer 1

Try this

它使用通过每个函数传递相同的对象，以便附加的元素可以与第一个元素分开设置动画

$("#start").on('click', function () {
    $("#arena").append('<div class="b"></div>');
    bbLoop($('.b:eq(0)'));
    $("#start").hide();

    (function loop() {
        var rand = Math.round(Math.random() * (3000 - 500)) + 500;
        setTimeout(function () {
            var elem = $('<div class="b"></div>');
            $("#arena").append(elem);
            bbRight(elem);
            doSomething();
            loop();
        }, rand);
    }());
});

function bbLoop(obj) {
    bbRight(obj);
}

function bbLeft(obj) {
    obj.animate({
        left: "-=300"
    }, 1500, "swing", bbLeftDown(obj));
}

function bbRight(obj) {
    obj.animate({
        left: "+=300"
    }, 1500, "swing", function() { bbRightDown(obj) });
}

function bbLeftDown(obj) {
    obj.animate({
        top: "+=300"
    }, 300, "swing");
}

function bbRightDown(obj) {
    obj.animate({
        top: "+=300"
    }, 300, "swing", bbLeft(obj));
}



function doSomething() {}

或者如果你想在最后删除check here。 .animate有时以奇特的方式工作，因此setTimeout中的结束动画时间的近似是必要的

如何为多个附加的div循环动画？

1 个答案: