在单独启动的动画之间添加延迟

时间:2011-05-04 16:48:19

标签: jquery animation delay

我有一个包含图像网址的数组,我将其添加到页面img标记。我将它们隐藏起来并在加载时淡入它们。这是有效的,但我想在它们之间添加一点延迟,所以它不会同时消失。

function ajaxCallback(data)
{
    if(data && data.images)
        for(var n in data.images)
        {
            var image = $('<img>')
                .prop(data.images[n])
                .css({opacity: 0})
                .appendTo('#output')
                .load(imageLoaded);
        }
}

function imageLoaded()
{
    $(this)
        .animate({opacity: 1});
}

目前,如果它们加载速度足够快,它们将基本上全部淡入。我想在每个之间有点延迟。尝试添加对delay的调用,但这似乎没有做太多。我想我可能不得不对队列或某事做些什么,但却无法完成如何做到这一点。

最好的方法是什么?

3 个答案:

答案 0 :(得分:1)

在类似的情况下(与图像无关),我使用递归函数来提取数组的第一个元素,完成它的工作,并在完成时调用自身。在您的情况下,您应该在animate()的回调中再次调用该函数。

答案 1 :(得分:0)

您可以在setTimeout方法中使用imageLoaded(),并为计时器提供随机值(在某些范围内)。

function imageLoaded()
{
   var self = $(this);
   setTimeout(function(){
                            self.animate({opacity: 1});
                        }, 
              Math.random()*2000 //will fire sometime between 0 to 2000 milliseconds
             ); 
}

答案 2 :(得分:0)

这是一种方式:

for (var n in data.images) {
    $('<img>').prop('src', data.images[n]).css({ // don't forget "src"
        opacity: 0
    })
      .appendTo('#output')
      .bind('reveal', imageLoaded); // bind a custom event
}

function imageLoaded() {
    $(this).animate({
        opacity: 1
    }, function(){ // wait until animation is done via callback
        $(this).next().trigger('reveal'); // then trigger the next reveal
    });
}

$('#output').find('img:first').load(function() { // when first image is loaded
    $(this).trigger('reveal'); // trigger its event to start the cascade
});

示例:http://jsfiddle.net/redler/mBfpG/