Discussion :

[kivok94]

salut,


j'ai 3 divs , je voudrais faire l'animation de 2eme à la fin d'animation d 2er ...

utilisant la notion delay et animate dans la function de fin de 1er animate

mais ça ne marche plus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
///////////////////////////////////////////////
 
$(function(){
 
   setInterval("animatediv()",3000);
 
});
 
function animatediv() {
 
 
  $(".mnt1").animate({"left":"-400px"},800,function(){
 
      $(this).removeClass("mnt1");
 
      $("#div2").css("left","400px").addClass("mnt2").animate({"left":"0px"},800,function(){
             $(this).removeClass("mnt2");
           $("#div3").css("left","400px").addClass("mnt3").animate({"left":"0px"},800)
 
      });
  });
 
 
}

[royto]

Il ne faut pas mettre de guillemets autour des propriétés que tu veux animer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#div1").animate({ left : "+400px" }, 800)

Un exemple qui fonctionne : http://jsfiddle.net/WbrjZ/

[danielhagnoul]

Il ne faut pas mettre de guillemets autour des propriétés que tu veux animer

Au contraire, il s'agit toujours d'un texte, ne pas en mettre par paresse est une très mauvaise habitude à mon humble avis.

En en mettant systématiquement on évite les pièges. On créera et l'on manipulera, sans être dérouté par l'écriture, les objets CSS dans jQuery.

Lors de la création d'un élément du DOM en jQuery, on évitera le piège des mots clés, exemple : "class".

Idem pour les propriétés et les méthodes d'un objet JSON.

[royto]

En effet, ca marche aussi avec. J'avais plusieurs modifications pour arriver à faire marcher mais ca venait pas de la ...

je viens de me rendre compte que mon exemple n'est pas la solution finale qui est ici : http://jsfiddle.net/WbrjZ/3/