JQUERY : Faire des animations avec un délai ?

Bonjour à tous,

j'ai fait une petite animation de plusieurs blocs via Jquery (ça donne un effet de volet puis un effet de fondu), l'effet rend bien, mais je voudrais que la transition commence un chouïa plus tard pour le second bloc (qu'ils disparaissent les uns à la suite des autres au lieu de tous en même temps).
L'idée est la suivante : chaque bloc a deux div : #bloctroisfirst et #bloctroisyp, l'idée est de faire disparaître #bloctroisyp, animer #bloctroisfirst et ensuite faire apparaître #bloctroisyp.

function transition_accueil(texte){
$("#bloctroisyp").fadeOut(0)
$("#bloctroisfirst").animate({opacity: "0.4", left: "+=170", width: "0"}, 500)
      .fadeOut(0);
       $("#bloctroisyp").fadeIn(500);

$("#blocquatreyp").fadeOut(0)
$("#blocquatrefirst").animate({opacity: "0.4", left: "+=170", width: "0"}, 500)
      .fadeOut(0);
       $("#blocquatreyp").fadeIn(500);
//* etc je vous passe les neufs blocs **
}

Le problème, c'est que tout est exécuté en même temps, j'aimerais que ça soit exécuté à la suite.
J'ai bien pensé à faire un :

$("#blocquatreyp").fadeOut(0)//, width: "0"
$("#blocquatrefirst").animate({opacity: "1"}, 200) 
// une animation ci-dessus qui ne sert à rien hormis à retarder l'exécution de la suite
      .animate({opacity: "0.4", left: "+=170", width: "0"}, 500)
      .fadeOut(0);
       $("#blocquatreyp").fadeIn(500);

Mais, c'est pas très très élégant.
Quelqu'un a une idée mieux que ça ?

D'avance merci !
Modifié par Nico3333fr (14 Oct 2009 - 09:20)

Salut,

Avec la fonction animate tu peux appeler une autre fonction a la fin de son exécution. Le terme donné est callback.

Voici la doc correspondante :http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback

Salut,

Et dans fonction de la callback utiliser setTimeout() pour la minuterie.

setTimeout(function(){...}, delai);

Doit aussi y avoir moyen de traiter les 9 blocs d'un coup, mais faudrait connaitre la structure html.