具有特定延迟的 100 个动画的循环

Question

我正在尝试制作 100 个动画，每个动画都有不同的延迟。 出了点问题，因为每个人都没有收到他特定的动画。 代码如下：

var text = $("#cont").text();
var count = 1;
var before = 0;
var after = 0;
var counter = "";
for (var i = 1; i <= 20; i++) {
    for (var j = 1; j <= 5; j++) {
        counter = before + "." + after;
        after += 2;
        text += "<div class='ball' id='ball" + count + "'></div><br />";
        $("#ball" + count).css({
            "-webkit-animation": "ball 3.5s linear" + counter + "s infinite normal",
            "-moz-animation": "ball 3.5s linear" + counter + "s infinite normal",
            "-ms-animation": "ball 3.5s linear" + counter + "s infinite normal",
            "-o-animation": "ball 3.5s linear" + counter + "s infinite normal",
            "animation": "ball 3.5s linear" + counter + "s infinite normal",
        });
        count++;
    }
    after = 0;
    before++;
}
i--;
$("#cont").html(text);

Answer 1

您正在尝试将.css() 应用于text 的字符串，这是您的问题区域，因为css() 仅适用于DOM 对象。另一件事是您在您之后将text 放入DOM 中循环已完成，因此您的任何 css 都已在循环中完成。我对其进行了更改，因此您将 html 附加到循环中的 $('#cont') 对象，以便可以对其进行操作。

你可以在这里看到小提琴：http://jsfiddle.net/FMBNc/3/

还创建了一个替代方案，您只应用动画延迟并在 CSS 文档中声明动画的其余部分：http://jsfiddle.net/FMBNc/4/

var text = $("#cont"); //changed to just the object
var count = 1;
var before = 0;
var after = 0;
var counter = "";
for (var i = 1; i <= 20; i++) {
    for (var j = 1; j <= 5; j++) {
        counter = before + "." + after;
        after += 2;
        //putting the html object in the DOM so it can be manipulated by .css()
        text.append("<div class='ball' id='ball" + count + "'></div>");
        $("#ball" + count).css({
            "-webkit-animation": "ball 3.5s linear " + counter + "s infinite",
            "-moz-animation": "ball 3.5s linear " + counter + "s infinite",
            "-ms-animation": "ball 3.5s linear " + counter + "s infinite",
            "-o-animation": "ball 3.5s linear " + counter + "s infinite",
            "animation": "ball 3.5s linear " + counter + "s infinite"
        });
        count++;
    }
    after = 0;
    before++;
}

此外，您的 CSS 声明中不需要 normal，因为它是默认设置。