Блог

У меня проблема. Я пытаюсь запрограммировать плагин snow jQuery для своих веб-сайтов, но теперь мне нужно дождаться завершения анимации одного элемента, прежде чем появится следующий. Надеюсь, вы знаете, что я думаю. Спасибо.

 $(document).ready(function() {
var width = $(window).width();
var height = $(window).height();

var startw = 0;

for (var i=0; i<5; i  ) {
    startw = 0   Math.floor(Math.random() * width);
    $('<div class="flake" id="'   i   '"></div>').appendTo('body');
    var element = ".flake#"   i;
    $(element).css('margin-left', startw   'px');
    $(element).animate({'margin-top': height-18}, 1000).delay(350).fadeOut(250);
}
  

});

Ссылка на JSFiddle

Вы знаете, что «продолжительность жизни» каждого фрагмента будет составлять 1600 мс, поэтому вы могли бы просто использовать setTimeout с таймаутом i*1600 :

 $(function () {
    var width = $(window).width();
    var height = $(window).height();
    var flakeLifeSpan = 1600;

    var startw = 0;

    for (var i = 0; i < 5; i  ) {
        setTimeout(function () {
            startw = 0   Math.floor(Math.random() * width);
            var element = $('<div class="flake"">F</div>');
            element.appendTo($("body"));
            $(element).css('margin-left', startw   'px');
            $(element).animate({
                'margin-top': height - 18
            }, 1000).delay(350).fadeOut(250);
        }, i * flakeLifeSpan);
    }
});
  

ДЕМОНСТРАЦИЯ

Раньше я F видел flake, я предполагаю, что у вас будет изображение, заданное CSS. Просто удалите F для ваших целей.