Question

我有问题。我试图为我的网站编写一个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 link

Answer 1

你知道＆＃39;生命周期＆＃39;每个薄片的长度为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);
    }
});

<强> DEMO

我使用F来查看片段，我假设您将拥有CSS设置的图像。只需删除F即可。

等待动画完成然后继续循环

1 个答案: