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

Answer 1

You have to increment the delay on each item.

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

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