если добавить div с помощью getJSON, возможно ли отображать их анимированно по одному?

Question

Привет всем. Я добавляю некоторые div'ы через функцию getJSON, но я хочу немного поднять это. Прямо сейчас все элементы отображаются одновременно. Можно ли отобразить их на миллисекундах друг от друга? Как первый, затем второй, и так далее?

Вот что у меня сейчас, например:

$.each(result, function(i, field){
  $(".thumbnail_area").append(  
    "<div class='thumb_container'>....</div>"
    ).children().css('background-color', 'red').delay(1000).fadeOut(1000);
  });// of result function
});// of foreach function

На данный момент все исчезает через секунду. (о, кстати, я знаю, я сказал, что хотел, чтобы они исчезли, но я просто использую fadeOut, потому что проще проверить эффект)

спасибо, ребята

Answer 1

Вам нужно умножить задержку на i в вашей функции.

$.each(result, function(i, field){
  $(".thumbnail_area").append(  
    "<div class='thumb_container'>....</div>"
    ).children().css('background-color', 'red').delay(1000*i).fadeOut(1000);
  });// of result function
});// of foreach function

Проверьте рабочий пример, который я делал раньше для того же самого вопроса http://jsfiddle.net/Xc6jn/3/

Answer 2

Используйте значение индекса, которое вы уже получили в цикле (i), чтобы генерировать задержку, которая увеличивается с каждой итерацией.

$.each(result, function(i, field){
  $(".thumbnail_area").append(  
    "<div class='thumb_container'>....</div>"
    ).children().css('background-color', 'red').delay(1000 * i).fadeIn(1000);
  });// of result function
});// of foreach function

Каждый элемент будет задерживаться i * 1000 миллисекунд, поэтомуони исчезнут через 1000 миллисекунд друг от друга.

Answer 3

Пример:

 setInterval(function() {   
    $('<div>').html('Hello!').addClass('blah').hide().appendTo('#container')
    .fadeIn(2000);
 }, 2000);

Взгляните на: http://jsfiddle.net/QpWLs/1/