CODEWITHSUNDEEP
javascriptjquery
dandoen
dandoen

Reputation: 1647

JQuery each append and fadeIn one by one

I have an each function on an array and I want to create a div for each array row and fade them in sequentially. Preferably how they are ordered in the array. Currently I manage to fade all in at once, but I want it sequentially. This is my code:

$.each(data, function(key, val) {
    var generatedDiv = $(document.createElement('div'));

    generatedDiv.attr('id',"div-"+val.id);
    generatedDiv.css({//somecssproperties});
    $('#results').append(generatedDiv);
    generatedDiv.fadeIn("fast");
});

Any ideas?

Thanks.

Upvotes: 4

Views: 997

Answers (1)

genesis
genesis

Reputation: 50976

Try this code

var t = 100;
$.each(data, function(key, val) {
    var generatedDiv = $(document.createElement('div'));
    generatedDiv.attr('id',"div-"+val.id);
    generatedDiv.css({//somecssproperties});
    $('#results').append(generatedDiv);
    t += 100;
    generatedDiv.delay(t).fadeIn('fast');
});

demo

Upvotes: 5

Related Questions