Enchainer une fonction après l'autre

Version imprimable

Bonjour,

je ne parviens pas à faire en sorte qu'une fonction soit exécutée après la précédente.

Contexte :
Je souhaite tout simplement créer un menu qui apparaît en premier plan de la gauche vers la droite. Pour cela j'ai fait en sorte que par défaut mon menu soit invisible et que sa largeur soit à 0. Puis lorsque l'on clique sur un élément le menu apparaît et passe de 0 à 155px.

Là où le bat blesse c'est que l’enchainement est réussi à la phase "aller". L'effet voulue est obtenue. Mais que pour le "retour" l'effet inverse ne marche pas. Disons que mon menu disparaît d'un seul coup. Je n'ai pas cette effet de disparition progressive et je ne sais pas par quelle voie me pencher.

Ci-joint mon code
Code:

1 2 3 4 5 6 7 8 $(document).ready(function(){ $("#content a").click(function() { $("#panneaux").css({'display' : 'block'}).animate({'width' : '155'}, 250); }); $(".close").click(function() { $("#panneaux").animate({'width' : '0'}, 10).css({'display' : 'none'},20); }); });
Merci beaucoup
EG

09/04/2015, 17h51
Bovino

Les animations sont faites de façon asynchrones, le comportement obtenu est donc normal selon ton code.
Pour faire ce que tu souhaites, tu peux passer en troisième paramètre de la fonction animate() une fonction de rappel qui sera appelée une fois l'animation terminée.
10/04/2015, 09h47
SpaceFrog

aussi nommée "callback" ...

Merci beaucoup pour vos réponses.

Je suis parvenue à l'effet désiré. En effet il fallait instaurer une fonction de rappel.

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	$("#content a").click(function(){
		$("#panneaux").css({'display' : 'block'}).animate({'width' : '155'}, 120);
	});
	$(".close").click(function(){
		$("#panneaux").animate({'width' : '0'},120, function(){
			$("#panneaux").css({'display' : 'none'},120);
		});
	});
});