animating elements sequentially using animate css

Question

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

elclanrs · Accepted Answer · 2012-12-25 21:24:52Z

3

You have to increment the delay on each item.

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

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

answered Dec 25, 2012 at 21:24

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Actually it is not animating, there should be another way to animate multiple objects sequentially. jsfiddle.net/fFMt2/18