Attendre la fin des animations sur un groupe

Version imprimable

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:

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>

16/03/2011, 17h15
erox44
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:

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

non desolé j'ai oublié de preciser
les animations ne sont pas lancées en chaine ...mais declenchées simultanément (enfin presque)
16/03/2011, 17h26
erox44

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
16/03/2011, 18h30
SpaceFrog

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
17/03/2011, 08h29
Loceka

Citation:

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 ?
17/03/2011, 08h35
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... ...
:(
17/03/2011, 08h40
Loceka

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. :P
17/03/2011, 09h03
SpaceFrog

:oops: :merci:
17/03/2011, 22h13
ABCIWEB

Citation:

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" :)
18/03/2011, 08h35
SpaceFrog

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 !

Bonsoir

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
// 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');
});

19/03/2011, 09h38
SpaceFrog

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
19/03/2011, 22h49
Loceka

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

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

Bon dev.