Question

Possible Duplicate:
jquery finish one animation then start the other one

I’ve got a set of divs loading via ajax (we’re talking about 6 divs, representing 6 products).

What I’m trying to accomplish is a progressive animation, like a jquery.fadeIn() per div, after the animation of the previous div has finished. What would be the optimal way to do this ?

I’m thinking like this:

1. i get the new html elements via ajax – done
2. i iterate over them – i can insert them as hidden then iterate over them
3. for each one, i show it with a fadeIn() and when the animimation finishes, i show the next one – for each one I execute fadeIn with a callback to the next one somehow…

Answer 1

You can build your own little plugin to do a recursive calling on the elements to fade them in sequentially. Something like this should work:

$.fn.queuedFadeIn = function(speed) {
    var elem = $(this);
    if(elem.length > 0) {
        elem.eq(0).fadeIn(speed, function() {
            elem.slice(1).queuedFadeIn(speed);
        });
    }
}

$('.div_selector').queuedFadeIn(1000);

This should fade them in one after the another. Here’s the same in pseudo-code to make things clearer:

# If there are elements in the selection:
    # Find the first element in selection, fade it in
       # After fade in, call itself, discarding the first element