[JQUERY] come creare una sequenza di eventi?

[evan75]

buon giorno a tutti,
mi sto avvicinando a jquery a causa di un progetto: dobbiamo convertire un'animazione creata in flash.. IN JQUERY!
Purtroppo non posso postare links o codice in quanto il lavoro è per una intranet.

il mio problema è questo:

ho due nested div:

<div id ="contenitore">
<div id ="contenuto"></div>
</div>


vorrei fare muovere il contenitore di 200 px a destra, e SOLO quando ha la traslazione è completata, iniziare a muovere il contenuto di 50 px all'interno del contenitore.

Quando scrivo il codice, le due animazioni partono insieme!

ho provato a fare una ricerca su google: nested div chaining with jquery e cose simili, ma mi sono perso in un mare di inutile codice.
qualcuno ha per caso idea di come realizzare ciò di cui ho bisogno?

grazie a tutti
I.

[evan75]

il codice Jquery usato: (per il momento ho inserito js e css nella pagina html, poi separerò)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".parti").click(function(){    
        $("#box").animate({ left: "200 px"}, 1200)        
        $("#box2").animate({ left: "50px"}, 50)
        return false;
    
    });

});
</script> 

css

<style type="text/css">


#box {
    background: #99FF00;
    height: 120px;
    width: 100px;
    position: relative;
}

#box2 {
    background: #000;
    height: 10px;
    width: 10px;
    position: relative;
}
</style> 

html:

[url="#"]inizia animazione[/url]</p>
<div id="box"><div id="box2">
</div>
</div> 

[evan75]

penso di avere risolto. non so se sia la maniera più corretta, ma ho aggiunto una funzione:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".parti").click(function(){            
        $('#box').animate({"left": "50px"}, 1000, function(){
        $('#box2').animate({"left": "50px"}, 1000);
});
return false;
});
}); 

è corretto? funzionare funziona..