JQUERY :: comment effectuer des animate de façon séquentielle

Question

Bonjour,

Tout est dans le sujet, en Jquery je réalise plusieurs animates mais ceux ci s&#8217;exécutent en même temps au lieu de s'exécuter les uns après les autres voici mon code :



$(document).ready
(
   function() 
  {
    

     move_all(1,100,100);
     move_all(2,200,400);
     move_all(3,300,500);




  }
)


function get_y(selecteur)
{

  obj    = $(selecteur);
  coord  = $(obj).position();

  valeur = coord.top + $(selecteur).height();

   //alert(valeur+'='+$(selecteur).height()+'+'+coord.top);
   
   return parseInt(valeur);
}



function move_all(i,top,left)
{
$('#titre_'+i+'').stop(true,true).animate({top : top+'px',left : left+'px'},1000
,function()
{
   $('#titre_etablissement_'+i+'').stop(true,true).animate({top : get_y('#titre_'+i+'')+'px',left : left+'px'},1000,
   function()
   {
      $('#etablissement_'+i+'').stop(true,true).animate({top : parseInt(get_y('#titre_etablissement_'+i+'')+20)+'px',left : left+'px'},1000,
  function()
  {
     $('#detail_diplome_'+i+'').stop(true,true).animate({top : get_y('#etablissement_'+i+'')+'px',left : left+'px'},1000);
  }
  );
   
   });
}).delay(2);

}


Tout se passe comme si les fonctions  move_all s'exécutaient en même temps...
Avez vous déjà eu ce problème ? avez vous des solutions ?


Merci pour vos rep !

@+!

cs_jperre · Answer

En modifiant la fonction move_all de la manière suivante :
function move_all(i,top,left,bNext,fNext)
{
$('#titre_'+i+'').stop(true,true).animate({top : top+'px',left : left+'px'},1000
,function()
{
   $('#titre_etablissement_'+i+'').stop(true,true).animate({top : get_y('#titre_'+i+'')+'px',left : left+'px'},1000,
   function()
   {
      $('#etablissement_'+i+'').stop(true,true).animate({top : parseInt(get_y('#titre_etablissement_'+i+'')+20)+'px',left : left+'px'},1000,
  function()
  {
  if (!bNext) {  
                      $('#detail_diplome_'+i+'').stop(true,true).animate({top :      get_y('#etablissement_'+i+'')+'px',left : left+'px'},1000);
                      }
                  else {
                      $('#detail_diplome_'+i+'').stop(true,true).animate({top :         get_y('#etablissement_'+i+'')+'px',left : left+'px'},1000,fNext);
                       }
  });
   
   });
}).delay(2);

}

Le début du code pourrait alors devenir :
$(document).ready
(
   function() 
  {
  move_all(1,100,100,true,move_all(2,200,400,true,move_all(3,300,500,false)));
  }
)
Et, via la fonction callback, les animations ne devraient pas se chevaucher.
Mais cela reste à tester.
Bon courage!...

bencoandco · Answer

Merci pour ta réponse Jperre !
Je vais tester, sinon j'ai trouvé une autre solution, le code suivant donne l&#8217;effet désiré :




   setTimeout("move_all(1,0,0,1000)",100);
   setTimeout("move_all(2,240,200,1000)",4500);
   setTimeout("move_all(3,430,400,1000)",8800);
   
 



la fonction setTimeout permet de temporiser...

Si vous avez d'autres solutions je suis preneur !


Merci !

JQUERY :: comment effectuer des animate de façon séquentielle

2 réponses

Votre réponse

Discussions similaires