CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Abishek
Abishek

Reputation: 11691

animating elements sequentially using animate css

I have the following http://jsfiddle.net/fFMt2/1/, in which I have a set of 20 boxes. I use the animate css plugin from http://daneden.me/animate.

What I would like to do is to animate each of the boxes in a sequential manner, I mean animate them one after the other.

Am not sure what am I missing to make them animate sequentially.

I seem to be doing something wrong with the setTimeout function

setTimeout(function(){
        $('.slider').append('<li><div class="box animated bounceInRight"></div></li>');
        },100);

Appreciate if someone could help me fix this

Upvotes: 1

Views: 639

Answers (1)

elclanrs
elclanrs

Reputation: 94101

You have to increment the delay on each item.

 setTimeout(function(){
    ...
 },100 * idx);
        --^--

Demo: http://jsfiddle.net/fFMt2/2/

Upvotes: 3

Related Questions