CODEWITHSUNDEEP
javascriptjquery
sibe94
sibe94

Reputation: 17

Append divs from array using jQuery show Animation

i have some divs in an array. I want to use the .show('slow') Animation from jQuery.

Currently i have this:

for(var i = 0; i < output.length; i++){
    jQuery("#container").append(output[i]).show('slow');
}

But all divs get appended instantly. I think the problem is that every append does not wait for the next append?

Are you guys having an idea?

Upvotes: 0

Views: 165

Answers (4)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

All the code operations shown happen on the same frame. Just hide them first.

Assuming the array is strings of divs:

for (var i = 0; i < output.length; i++) {
    jQuery("#container").append($(output[i]).hide().delay(2000* i).show('slow'));
}

The second issue is that you want to chain the visual fades, one after the other, in which case simply introduce an increasing delay before the shows. Just adjust the timing value to get the effect you want.

JSFiddle: http://jsfiddle.net/nvffL4zt/1/

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

use closure 

for (var i = 0; i < output.length; i++) {
    (function (i) {
        jQuery("#container").append(output[i]).children().last().hide().show('slow');
    })(i);

}

Upvotes: 0

felixfbecker
felixfbecker

Reputation: 2363

First hide the divs, then append them, and then show them. The trick lies in using appendTo(), because normal append() returns the container, not the appended element. So you're using show() on the container, not the appended div.

for (var i = 0; i < output.length; i++) {

    jQuery(output[i])).hide().appendTo("#container").show('slow');   
}

Upvotes: 1

Robin Leboeuf
Robin Leboeuf

Reputation: 2116

You have two solution, either you put an inline style on your divs with display:none; either you affect them a class (let's say "hidden"), and you put .hidden{display:none} in your css.

The problem is that your divs are displayed when you append them, and the show function is useless because your divs are already visible.

Upvotes: 0

Related Questions