Fonction .animate() effet inverse

Version imprimable

Salut a toutes et a tous,

Je veux faire quelque chose de super simple mais je bloque un peu:

J'ai une fonction qui anime mon bloc lorsque celui ci est cliqué.

mon animation est ensuite "verouillée" par le .stop() donc si je reclique dessus rien ne se passe.

Ce que je veux: la même animation mais avec la possibilité de recliquer sur le bloc une fois que le premier .animate a été exécuté donc une fois que mon bloc s'est déplacé vers le bas.

Quand je reclique mon bloc repartira vers le top et reviendra a sa place.

Voici le code ultra simple de mon animation :
Code:

1 2 3 4 5 6 7 8 9 10 $("#right").click(function(){ $(this).attr('clicked',true); $(".block").animate({ "top": "+=152px"}, { complete:function(){ $(".block").stop().animate({"top": "+=0px"}); $("#power").animate( { width:"240px" }, 1500); } }); });
Avez vous des idées qui pourraient m'aider ? :?

en fait la méthode stop() sert à arrêter l'événement en cours, dans ton cas elle en sert à rien car tu l'appelle quand ton anim est complete, ce que tu peux faire c'est de garder deux valeurs (élément en mvt, ver le haut ou vers le bas) associées à ton élément qui subit l'animation et les modifier en conséquence selon ton contexte, tu peux ajouter des valeurs à des éléments grâce à la méthode .data très utile par exemple :
Code:

1 2 3 $('#right').data("active",true); //setter; $('#right').data("active");//getter, false si pas définie
pour empêcher le click pendant l'animation tu fais tu simplement un test au début du handler du click
Code:

1 2 3 4 5 $('#right').click(function(){ if($(this).data("active")) return; //si no tu fais tes anims });
voilà un code complet, j'espère que ça te servira
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $("#right").click(function(){ //si l'élément est active (en animation) on fait rien if($(this).data("active")) return; //on met le drapeau d'élément en animation $(this).data("active",true); var top ; if($(this).data("enBas")){//on est en bas top = "0px";//on va vers le haut $(this).data("enBas",false);//on ne sera plus en bas }else{//on est en haut, on passe ici pour la première fois car "enBas" pas défini top = "+=152px";//on va vers le bas $(this).data("enBas",true);//on sera en bas } $(this).animate( {"top":top},//on anime function(){//fonction de callback à la fin de l'anim $(this).data("active",false);//on est plus en état anim } ); });

19/07/2010, 15h26
MrAl1985

Merci beaucoup Polkduran, je vais checker ca. :ccool:

Citation:

Envoyé par polkduran

en fait la méthode stop() sert à arrêter l'événement en cours, dans ton cas elle en sert à rien car tu l'appelle quand ton anim est complete, ce que tu peux faire c'est de garder deux valeurs (élément en mvt, ver le haut ou vers le bas) associées à ton élément qui subit l'animation et les modifier en conséquence selon ton contexte, tu peux ajouter des valeurs à des éléments grâce à la méthode .data très utile par exemple :

Code:

1
2
3
 
$('#right').data("active",true); //setter;
$('#right').data("active");//getter, false si pas définie

pour empêcher le click pendant l'animation tu fais tu simplement un test au début du handler du click

Code:

1
2
3
4
5
 
$('#right').click(function(){
    if($(this).data("active")) return;
    //si no tu fais tes anims
});

voilà un code complet, j'espère que ça te servira

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$("#right").click(function(){
	//si l'élément est active (en animation) on fait rien
	if($(this).data("active")) return;
	//on met le drapeau d'élément en animation
	$(this).data("active",true);
 
	var top ;
 
	if($(this).data("enBas")){//on est en bas
		top = "0px";//on va vers le haut
		$(this).data("enBas",false);//on ne sera plus en bas
	}else{//on est en haut, on passe ici pour la première fois car "enBas" pas défini
		top = "+=152px";//on va vers le bas
		$(this).data("enBas",true);//on sera en bas
	}
	$(this).animate(
			{"top":top},//on anime
			function(){//fonction de callback à la fin de l'anim
				$(this).data("active",false);//on est plus en état anim
			}
			);
});

La code fonctionne pour animer mon bloc vers le bas donc le else est execute, mais le block n'est plus clickable une fois executer.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
$("#right").click(function(){
 $(this).attr('clicked',true);
 
	if($(this).data("active")) return;	//si l'élément est active (en animation) on fait rien
	$(this).data("active",true);	//on met le drapeau d'élément en animation
 
	var top ;
 
	if($(this).data("enBas")){//on est en bas
		top = "0px";//on va vers le haut
		$("#power").animate( { width:"0px" }, 1500);
		$(this).data("enBas",false);//on ne sera plus en bas
	}
	else{//on est en haut, on passe ici pour la première fois car "enBas" pas défini
		top = "+=152px";//on va vers le bas
		$("#power").animate( { width:"240px" }, 1500);
		$(this).data("enBas",true);//on sera en bas
	}
	$(this).animate(
			{"top":top},//on anime
			function(){//fonction de callback à la fin de l'anim
				$(this).data("active",false);//on est plus en état anim
			}
			);
});

20/07/2010, 09h37
polkduran
j'ai vu que tu animes aussi un bloc '#power' qui grandit quand '#right' va vers le bas, est-ce que par hasard le '#power' ne reste pas au-dessus du '#right' donc qui t'empêche de cliquer sur '#right' ?
tu peux mettre des alert(); dans ton code des propriétés pour surveiller un peu ce qui se passe, par exemple pour voir déjà si le 'onclick' est exécuté et savoir si data('active') est true ou false:
Code:

1 2 3 4 5 6 ("#right").click(function(){ $(this).attr('clicked',true); alert('dans onclick'); alert('active : '+$(this).data('active')); .....
et ainsi de suite pour voir où ça coince, car chez moi le code que je t'ai fourni au début marche bien, moi j'ai testé sur IE et chrome

bon code, j'espère que tu trouveras, sinon mets aussi ton code html et css, il se peut que des dysfonctionnements viennent de là
21/07/2010, 15h56
MrAl1985

Merci Polkduran pour ton aide.
Pour repondre a ta question non le bloc "power" qui est anime ne viens pas au dessus de mon bloc "right".

j'ai tente de supprimer l'animation du bloc power et de juste mettre ton code tel quel du depart.

C' est exactement pareil, le bloc "right" va vers le bas mais impossible de recliker dessus pour le faire remonter :?
21/07/2010, 20h27
polkduran

salut,
j'aimerais bien t'aider mais sans plus de détails je ne peux pas savoir où est-ce que ça coince dans ton code,
je te suggère de faire un peu de "debug", càd mettre des 'alert' des variables y propriétés presque à chaque ligne pour voir où est-ce que ton code s'arrête, si tu passes dans les 'ifs', etc

si non , quelle version de jquery tu utilises et quel navigateur, moi j'utilise jquery 1.4.2 et j'ai testé mon code sur IE et chrome et pas de souci,

à la limite postes un bon morceau de ton code avec html, css et js pour voir mieux
21/07/2010, 22h12
MrAl1985

Je développe sous firefox mais je teste mes sites sous ie et chrome.

je vais t'envoyer la page par mp ce sera plus simple.

J'ai mis juste ton premier code, et le pb est tjs le meme.
tu pense au css ?

merci ;)
22/07/2010, 00h47
polkduran

je t'ai envoyé par mp la solution,
espérons que cette fois ça marchera

bon continuation

au fait il est sympa le desing du site
22/07/2010, 15h52
MrAl1985

Un grand merci a toi Polkduran problème résolu ! :ccool:

juste un problème de css dépendant de mon animation en fait pour ceux intéressé par le code.