在分别启动动画之间添加延迟

Question

我有一个包含图像URL的数组，我将它们作为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的调用，但似乎没有什么效果。想到可能需要使用队列或其他方法，但不太清楚如何实现。

怎样才是最好的方法？

- Svish

---

请不要在标题中写标签。 - Lightness Races in Orbit

Answer 1

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

- morgar

Answer 2

你可以在 imageLoaded() 方法中使用 setTimeout，并为计时器设置一个随机值（在某些范围内）。

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

- no.good.at.coding

Answer 3

这是一种方法：

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/

- Ken Redler

---

两张图片加载之间时间过长会发生什么？ - Svish

好的，你说你想在加载之间有一个延迟。目前这个代码只是在每个动画完成时回调。如果某个特定的加载需要太长时间，它当然会延迟整个链条。如果你不想有这种依赖关系，并且你知道什么是“太长”，那么你可能需要一个基于setTimeout的确定性触发机制。 - Ken Redler

我的意思是，如果接下来的一个需要太长时间，这样当一个完成并触发揭示时，下一个还没有加载完。 - Svish

@Svish，我明白你的问题。你可以使用.load(fn)将“动画下一个揭示”的逻辑包装起来。fn函数只会在所选元素的加载完成后才会触发。你可以在触发reveal的地方执行这个操作，例如：$(this).next().load( function(){ $(this).trigger('reveal'); } ); - Ken Redler