jQuery animation cascade

Question

Hi I have a site with a div containing three or more div. My div id (id="linguetta_next") is dynamic: I add dynamically more than a div inside it. I want that the div into the main div (linguetta_next) appear in cascade: the first appear, at the end the second appear, at the end the third appear.

This is my html:

<div id="linguetta_next">
                <div class="linguetta" id="linguetta_next1" style="margin-left:1%;">
                    <p class="tit_linguetta">azienda</p>
                </div>
                <div class="linguetta_small" id="linguetta_next2" style="margin-left:10%; margin-top:10px;">
                    <p class="tit_linguetta_small">staff</p>
                </div>
                <div class="linguetta_small" id="linguetta_next3" style="margin-left:10%; margin-top:10px;">
                    <p class="tit_linguetta_small">risorse umane</p>
                </div>
             </div>

I have tried in this mode but in this mode appear at the same time, how can I make a cascade effect?

function moveDiv(){
var menu2=$(".colCenter").find('#linguetta_next');
menu2.css('right',-300).css('position','absolute').css('z-index',1000);
menu2.animate({left:0}, 1000 );
}

Answer 1

Here is one option:

$("#linguetta_next div").each(function(i) {
    var el = $(this);
    setTimeout(function() {
        el.animate({
            left: 0
        }, 1000);
    }, i * 2000);
});​

DEMO: http://jsfiddle.net/5Pbwf/

Answer 2

Use an animation effect using jQuery's .animate() as you'll need a callback to create a cascading effect, the callback will be called only after the initial animation is complete along with time of animation (optional); like:

$('#linguetta_next1').animate(function() {
    // do animation stuff
} , 1000, function() {
    // callback - effect to do after first is complete
});