Добавление задержки между отдельно запущенными анимациями

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, но это, похоже, мало что дало.Думая, что мне, возможно, придется что-то делать с очередью или чем-то, но я не совсем понимаю, как это сделать.

Какой лучший способ сделать это?

Answer 1

В аналогичном случае (не связанном с изображениями) я использую рекурсивную функцию, которая извлекает первый элемент массива, выполняет свою работу и вызывает себя, когда он завершает работу. В вашем случае вам следует снова вызвать функцию при обратном вызове animate().

Answer 2

Вот один из способов:

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/

Answer 3

Вы можете использовать setTimeout в методе imageLoaded() и задать случайное значение (в некоторых пределах) для таймера.

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