Attendre la fin des animations sur un groupe

**SpaceFrog** · 16/03/2011, 17h01

Je vous soumets ce bout de code en desespoir de trouver mieux ...

j'ai tenté un callback dans le onclick mais ça ne passe pas

le but est d'attendre la fin d'une série d'animations pour lancer un callback

J'ai aussi explore la possibilité de faire une vérification dans un setInterval sur le is:animated, ça fonctionne mais je trouve ça super lourd !

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
<script type="text/javascript">
$(function(){
   $("#go").data('finished',0)
	$("#go").click(function(){
	             $("#one").fadeOut('slow',function(){waitfor('counter',foo)} );
	        	   $("#two").fadeOut(5000, function() {waitfor('counter',foo)} );
	        			 })		
})
 
function waitfor(classe, launch){
 $('#go').data('finished',$("#go").data('finished')+1);
 if ( $('#go').data('finished') > $('.'+classe).length ){launch()}; 
 }
 
function foo(){ alert('finished') }
</script>
 
</head>
<body>
<div id='one' class="coutner">ljklkj</div>
<div id='two' class="counter">ljklkj</div>
<input id="go"  type='button' value='go' />
</body>

**erox44** · 16/03/2011, 17h15

Salut,
en gros, tu veux lancer tes deux fadeOut, et qu'une fois que les deux sont fini, lancer un callback?
Si c'est le cas, pourquoi ne pas les imbriquer ces fadeOut du genre :

Code :

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

1
2
3
4
5
6
7
$("#one").fadeOut( 5000, function()
	{
		$("#two").fadeOut( 5000, function()
			{
				// ton callback
			});
	});

**SpaceFrog** · 16/03/2011, 17h22

non desolé j'ai oublié de preciser
les animations ne sont pas lancées en chaine ...mais declenchées simultanément (enfin presque)

**erox44** · 16/03/2011, 17h26

Ah ok, hm dans ce cas, à part un setTimeout pour vérifier que telle ou telle animation est finie, jvois pas trop comment tu peux gérer ca :s

**SpaceFrog** · 16/03/2011, 18h30

si justement j'ai trouvé deux façons de faire qui fonctionnent mais aucune ne me donne entière satisfaction intellectuellement

la première donné ci-dessus qui lance un call back a chaque animation en verfiaint si le nombre total des animations finies correspond au total attendu ...

La seconde evoquée au dessus qui boucles dans un setInterval en testant les ou avec un setTimeout recurcif en testant les is:animated sur la collection

**Loceka** · 17/03/2011, 08h29

Envoyé par SpaceFrog

la première donné ci-dessus qui lance un call back a chaque animation en verfiaint si le nombre total des animations finies correspond au total attendu ...

Bon j'ai jamais fait d'animation et je suis pas sûr d'avoir tout bien compris, mais je ne vois pas en quoi ça ne te satisfait pas.
A ce que j'en ai compris ça m'a l'air optimal :
Chaque animation "pointe" quand elle a fini en appellant la fonction waitfor. Cette fonction waitfor connaît le nombre d'animations et est capable de déterminer si toutes les animations ont ou non pointé et agit en conséquence.

Selon moi tu ne peux pas mieux faire en terme de simplicité et de performance. La solution de faire un processus parallèle qui va regarder tous les x temps si toutes les animations ont fini est bien plus moche.

Qu'est-ce qui, selon toi, pourrait mieux te satisfaire ? Ou plutôt qu'est-ce qui te déplaît dans ta solution ?

**SpaceFrog** · 17/03/2011, 08h35

Ben je pensais que jquery aurait intégré un plugin qui permettrait de faire directement un callback sur des méthodes directes comme click() voire même sur des closures et pas uniquement sur des méthodes temporisées comme animate etc... ...

**Loceka** · 17/03/2011, 08h40

Ah ok, là tu me parles chinois. Faudrait vraiment que je me mette à jQuery un jour.

En tout cas même si ta solution n'est pas toute faite, je la trouve plutôt jolie.

**SpaceFrog** · 17/03/2011, 09h03

**ABCIWEB** · 17/03/2011, 22h13

Envoyé par SpaceFrog

Ben je pensais que jquery aurait intégré un plugin qui permettrait de faire directement un callback sur des méthodes directes comme click() voire même sur des closures et pas uniquement sur des méthodes temporisées comme animate etc... ...

Je me suis abonné à cette discussion pour voir si quelqu'un avait déjà vu une solution en ce sens... jquery fait parfois des miracles, mais sur le principe c'est déjà pas évident à formaliser.

En attendant je rejoins Loceka, je trouve ta solution très correcte et je la retiens pour d'éventuels besoins. Et quand bien même il y aurait mieux, comme celle-ci est tout à fait limpide on devrait pas gagner grand chose à faire autrement... après, trop passer de temps pour vouloir trouver mieux, je me dis qu'on se pose peut-être des "problèmes de riches"

**SpaceFrog** · 18/03/2011, 08h35

lol...
Je garde aussi un oeil sur ce thread. Juste au cas ou il existerait parmi les miracles de jquery une solution toute faite.
Merci !

**danielhagnoul** · 18/03/2011, 23h43

Bonsoir

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
25
// FAQ jQuery $.Deferred : http://javascript.developpez.com/faq/jquery/?page=Objets#ObjetDeferred
 
var objDifAnim1 = $.Deferred(),
	objDifAnim2 = $.Deferred();
 
var anim1 = function(){
	$("#one").fadeOut('slow', function(){
		objDifAnim1.resolve();
	});
}
 
var anim2 = function(){
	$("#two").fadeOut('slow', function(){
		objDifAnim2.resolve();
	});
}
 
$("#go").click(function(){
	anim1();
	setTimeout(anim2, 1000);
});
 
$.when(objDifAnim1, objDifAnim2).done(function(){
	console.log('finished');
});

**SpaceFrog** · 19/03/2011, 09h38

Ha ben voilà ça existe ...

Mais bon vu la méthode ça doit être l'équivalent de la seconde méthode que j'avais trouvée au départ avec un setInterval dans le when qui vérifie une variable créée dans le deferred.

Je le demande si je préfère pas ma méthode :grin: elle doit être moins gourmande.
Faudrait benchmarquer

**Loceka** · 19/03/2011, 22h49

Et en plus c'était dans la FAQ...

En tout cas maintenant tu as l'embarras du choix.

Bon dev.

Attendre la fin des animations sur un groupe

jQuery

Discussions similaires

Partager

Partager