Question

Hey everybody.I’m appending some divs through a getJSON function but i want to jazz it up a bit. Right now all the divs are displaying at the same time. Is it possible to display them milliseconds apart? Like the first fades in, then the second, and so on?

Here’s what I have right now for example:

$.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

As of now, everything fades out after a second. (oh btw i know i said i wanted them to fade in, but im just using fadeOut bc its easier to test the effect)

thanks guys

Answer 1

Use the index value you’ve already got in the loop (i) to generate a delay that increases with each iteration.

$.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

Each item will be delayed i * 1000 milliseconds, so they’ll fade in 1000 milliseconds apart from each other.