2

それぞれ遅延が異なる 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);
4

1 に答える 1

1

.css()の文字列に適用しようとしています。これは、 DOM オブジェクトでのみ機能textする問題領域です。もう 1 つのことは、ループが完了した後に DOM に入れていたため、css のいずれかがすでにループ。ループ内のオブジェクトにhtmlを追加して操作できるように変更しました。css()text$('#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++;
}

normalまた、 CSS 宣言はデフォルトであるため必要ありません。

于 2013-06-30T16:49:43.607 に答える