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

我有一个带有图像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});
}

函数ajaxCallback（数据）
{
if（数据和数据图像）
for（data.images中的变量n）
{
变量图像=$（''）
.prop（数据.图像[n]）
.css（{opacity:0}）
.appendTo（“#output”）
.加载（图像加载）；
}
}
函数imageLoaded（）
{
$（本）
.animate（{opacity:1}）；
}

目前，如果加载速度足够快，它们基本上会立即消失。我希望双方之间有点延迟。尝试添加对

delay

的调用，但似乎效果不大。我想我可能需要排队或者做些什么，但是我不知道怎么做

---

最好的方法是什么？

在类似的情况下（与图像无关），我使用递归函数提取数组的第一个元素，执行其工作，并在完成时调用自身。在您的情况下，您应该在

animate（）

的回调中再次调用该函数。您可以在

imageload（）

方法中使用

setTimeout

，并为计时器提供一个随机值（在某些范围内）

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

这里有一个方法：

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
});

for（data.images中的变量n）{
$('
示例：
请不要在标题中写入标记。如果两个图像加载之间的时间过长，会发生什么情况？好吧，您说过希望加载之间有一个延迟。这样写的话，每个动画完成后只是一个回调。如果某个特定加载时间过长，它当然会延迟链的其余部分。如果您不希望此dependency，如果您对“太长”有一些概念，那么您可能需要一个基于
setTimeout
的确定性触发机制。我的意思是，如果下一个需要太长的时间，那么当一个完成并触发显示时，下一个还没有完成加载。@Svish，我明白您的要求。您可以做的是将使用
.load（fn）
为下一次显示设置动画”逻辑。只有在所选元素的加载完成后，
fn
函数才会启动。您可以在触发
显示时执行此操作，类似于
$（this.next（）.load（function（）{$（this.trigger（'releal'）；}）；