Discussion :

[NeymarHenry]

Salut à tous,
Je souhaite créer une autoroute en javascript , j'ai donc réaliser 16 divs qui sont les lignes blanches.Ensuite, j'ai réaliser les animations suivantes:

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
$("#a").animate({top:"100%"},1000);
$("#b").animate({top:"100%"},1000);
$("#c").animate({top:"100%"},1000);
$("#d").animate({top:"100%"},1000);
$("#e").animate({top:"100%"},1000);
$("#f").animate({top:"100%"},1000);
$("#g").animate({top:"100%"},1000);
$("#h").animate({top:"100%"},1000);
$("#i").animate({top:"100%"},1000);
$("#j").animate({top:"100%"},1000);
$("#k").animate({top:"100%"},1000);
$("#l").animate({top:"100%"},1000);
$("#m").animate({top:"100%"},1000);
$("#n").animate({top:"100%"},1000);
$("#o").animate({top:"100%"},1000);
$("#p").animate({top:"100%"},1000);

Mes lignes blanches descendent vers le bas , mais qu'une seule fois et moi je voudrait que le mouvement soit continu et que chaque div, après avoir terminé son animation, revienne à leur position initiale et ensuite réeffectue l'animation et ainsi de suite. Pour cela on m'a conseiller de faire une boucle et de redéfinir les propriétes css à la fin de l'animation pour que les divs reviennent à leurs positions initiales, mais je ne sais pas comment faire et comment m'y prendre .
Merci d'avance.

[-Rpass-]

Bonjour,

tu peux mettre un callback à ta fonction animate, la fonction s'éxecutera quand ton animation sera complétée

par exemple :

Code :

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

1
2
3
4
 
$("#a").animate({top:"100%"},1000, function(){
top: 0%; // ici tu remets tes valeurs css par défaut
});

Et pour que cela soit en continue il faut effectivement lancer la fonction animate en boucle, en l'occurence toutes les 1000ms pour que ton animation est le temps de terminer. Je te laisse regarder la méthode Javascript setInterval

[NeymarHenry]

Merci pour la réponse,

Je ne comprend pas trop le principe du callback, je dois faire un callback pour chaque animation de div ?
Je vous montre le code entier de ce qui est dédié au déplacement de mes divs:

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
function move () {
	$("#a").animate({top:"100%"},1000);
	$("#b").animate({top:"100%"},1000);
	$("#c").animate({top:"100%"},1000);
	$("#d").animate({top:"100%"},1000);
	$("#e").animate({top:"100%"},1000);
	$("#f").animate({top:"100%"},1000);
	$("#g").animate({top:"100%"},1000);
	$("#h").animate({top:"100%"},1000);
	$("#i").animate({top:"100%"},1000);
	$("#j").animate({top:"100%"},1000);
	$("#k").animate({top:"100%"},1000);
	$("#l").animate({top:"100%"},1000);
	$("#m").animate({top:"100%"},1000);
	$("#n").animate({top:"100%"},1000);
	$("#o").animate({top:"100%"},1000);
	$("#p").animate({top:"100%"},1000);
 
	}
 
	$("#dep").on("click",move); /*Les animations s'éxécutent à partir d'un bouton*/

Si j'applique votre méthode :

Code :

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

1
2
3
$("#a").animate({top:"100%"},1000,move{
top: 10px; 
});

Mais ca ne fonctionne pas.

[-Rpass-]

ta syntaxe n'est pas bonne, un callback est une fonction anonyme qui sera appelé à la fin de l'exécution de la fonction(en l'occurence ici animate). Tu n'as donc pas besoin de lui donner de nom.
Ensuite j'ai oublié dans mon dernier message, mais il faut préciser sur quel élément faire la modification.

Code :

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

1
2
3
4
 
$("#a").animate({top:"100%"},1000,function(){
      $("#a").css("top", "10%");
});

Cela va replacer ta div à l'endroit initial, juste après ton animation. Mais cela ne sera éxécuté qu'une seule fois. Relis la fin de mon dernier message, tu peux utiliser setInterval

[Watilin]

N'oublie pas de tester tes scripts avec la console de ton navigateur.

Sans parler de code, je crois que tu vas avoir un problème au niveau de la conception. Actuellement tu demandes à chacune de tes lignes blanches d'arriver en bas (top: "100%") au bout du même temps. Ce qui va se passer, c'est que les <div> vont avoir chacune une vitesse différente, celle du haut la plus rapide et celle du bas la plus lente.

En plus de ça, tu vas te rendre compte que l'animation n'est pas homogène, à cause de l'easing (en français « adoucissement ») par défaut, qui modifie la vitesse vers le début et la fin de l'animation. Il faut que tu précises que tu veux un easing linéaire ("linear"), ce qui signifie même vitesse partout.

Et le pire est à venir : en déclarant autant d'animations qu'il y a de <div>, tu crées des animations indépendantes les unes des autres, et tu risques de voir apparaître un décalage petit à petit, car les animations se désynchronisent.

En fait, je pense que tu vas devoir faire un choix :

1. abandonner .animate() qui ne convient pas à ton besoin trop spécifique, et coder « à la main » avec setTimeout ou setInterval, en n'utilisant qu'une seule fonction pour éviter la désynchro ;
2. ajouter au moins une ligne blanche et les placer dans un conteneur, et animer le conteneur à la place. Le conteneur devra dépasser légèrement du bloc « autoroute » principal, et tu feras en sorte que les lignes blanches apparaissent au même endroit dans sa position de début et sa position de fin, ainsi le bouclage de l'animation se fera sans discontinuité.
   Je rajoute un schéma pour être plus clair :
   

   Code :

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
          +-+
          | |               +-+
          | |               | |
    +-------------+   +-------------+   +-----+-+-----+
    |     | |     |   |     | |     |   |     | |     |
    |     | |     |   |     | |     |   |     | |     |
    +-----+-+-----+   +-------------+   +-------------+
                            | |               | |
                            +-+               | |
                                              +-+
         début            milieu            fin

   Tu devras donner un overflow: hidden au bloc autoroute et un overflow: visible au conteneur. Note aussi que le top du conteneur commence dans le négatif et finit à 0.

Pour la syntaxe, il y a plein d'exemples ici : http://api.jquery.com/animate/#entry-examples

[NoSmoking]

Bonjour,

(...)et les placer dans un conteneur, et animer le conteneur à la place.

+1
cette approche me paraît quand même bien plus opportune, pourquoi en manipuler 100 quand tu peux n'en manipuler qu'une?