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

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 ?

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

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"

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.

16/03/2011, 17h22	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	non desolé j'ai oublié de preciser les animations ne sont pas lancées en chaine ...mais declenchées simultanément (enfin presque) __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/03/2011, 17h26	#4
erox44 Membre habitué Développeur Web Inscription : avril 2007 Messages : 323 Détails du profil Informations personnelles : Sexe : Âge : 23 Localisation : France, Loire Atlantique (Pays de la Loire) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : avril 2007 Messages : 323 Points : 144 Points : 144	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 __________________ L'intelligence c'est comme la confiture, moins tu en as , plus tu l'étales...
	00

16/03/2011, 18h30	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 08h35	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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... ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 09h03	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	__________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 08h40	#8
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	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.
	00

18/03/2011, 08h35	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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 ! __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/03/2011, 09h38	#13
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/03/2011, 22h49	#14
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Et en plus c'était dans la FAQ... En tout cas maintenant tu as l'embarras du choix. Bon dev.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email