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 ?

Attendre la fin des animations sur un groupe

jQuery

Vue hybride

Discussions similaires

Partager

Partager