CODEWITHSUNDEEP
jqueryjsonappendjquery-animate
NickG77
NickG77

Reputation: 183

if appending divs with getJSON, is it possible to display them animated one at a time?

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

Upvotes: 0

Views: 468

Answers (3)

Gary Green
Gary Green

Reputation: 22395

Example:

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

Take a look at: http://jsfiddle.net/QpWLs/1/

Upvotes: 0

Hussein
Hussein

Reputation: 42818

You need to multiply the delay by i in your function. 

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

Check working example i did before for a simiar question http://jsfiddle.net/Xc6jn/3/

Upvotes: 1

Liza Daly
Liza Daly

Reputation: 2963

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.

Upvotes: 1

Related Questions