цикл из 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 objects.The Другое дело, вы надевали 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++; 
} 

Кроме того, вам не нужно normal в вашем объявлении CSS, поскольку оно по умолчанию.