我正在尝试制作 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);
最佳答案
您正在尝试将 .css()
应用于 text
字符串,这是您的问题区域,仅作为 css()
适用于 DOM 对象。另一件事是您在循环完成后将 text
放入 DOM,因此您的任何 css 都已在循环中完成。我更改了它,以便您将 html 附加到循环中的 $('#cont')
对象,以便可以对其进行操作。
你可以在这里看到 fiddle :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
,因为它是默认设置。
关于javascript - 具有特定延迟的 100 个动画循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17391114/