Lors d'une animation dans jQuery, quelle est la meilleure pratique pour déclencher un rappel uniquement lorsque TOUS les éléments sont animés et non pour chaque élément?Lors de l'animation, comment déclencher le rappel uniquement lorsque tous les éléments sont terminés?
Par exemple:
$('.someElements').fadeOut('fast', function() {
// dont do this until ALL elements are done fading
}
Cela pourrait être un extrait d'essayer:
var numberOfElements = $('.someElements').length;
$('.someElements').fadeOut(fast, function() {
if(numberOfElements-- > 0) return;
alert('call the Fireman!');
});
L'alerte est juste un espace réservé à la fin -callback vous devez tirer.
EDIT (une autre façon):
Vous pouvez également prendre tous les éléments, mais pas la dernière un.
$('.someElements').not(.someElements:last).fadeOut();
puis ajouter un fadeOut avec rappel uniquement Il
$('.someElements:last').fadeOut(fast, function(){
// do something, it's the end of the world
};
Super! Mais, pour que la comparaison devienne vraie, la condition devrait être (--numberOfElements> 0)? Pour diminuer la variable avant la comparaison. –
- est un opérateur LeftHandSideExp.L'expression diminue d'abord, puis évalue la comparaison. Dites que vous êtes sur la dernière boucle: vous avez 1 élément, l'expression va dans ce sens: 1--> 0? Faux, ne revenez pas, passez à la ligne suivante et déclenchez l'appel d'alerte. – microspino
Pour que cela fonctionne, la condition doit être (--numberOfElements> 0) – aghoshx
Ceci est une grande question, selon le jQuery docs:
Si plusieurs éléments sont animés, il est important de noter que le rappel est exécuté une fois par correspondance élément, pas une fois pour l'animation dans son ensemble.
Pour contourner cette limitation, vous pouvez:
.someElements, et mettre en place un rappel distinct pour chacun.count qui garde la trace du nombre total de rappels.count jusqu'à ce qu'il atteigne 0.Lorsque le nombre atteint 0, tous les callbacks sont complets, et vous serez garanti que tous les éléments sont faits animant. De là, vous pouvez alors avoir un code spécial dans votre rappel qui fait tout ce que vous devez faire ...
Merci Justin! Cela semble un peu compliqué si vous voulez juste que le callback se déclenche une fois, mais c'est parfait pour quand vous avez besoin de quelque chose pour chaque animation aussi. Pour ce cas plus simple, j'irais avec la réponse de microspino, cependant. –
versions plus récentes de jQuery (1.6 et version ultérieure) comprennent l'idée d'un promise. L'utilisation de cette fonction élimine le besoin d'une solution de contournement. Par exemple:
// define the animation on many elements
$('.someElements').fadeOut('fast');
// define the promise that is called once all element animations are done
$('.someElements').promise().done(function() {
// put callback actions here
});
Suis-je confus sur votre question? Tous ces éléments devraient terminer leur animation en même temps. Ils ont tous la durée de «rapide», donc ils finissent tous en même temps. – Tejs
Voulez-vous déclencher le rappel seulement ** une fois **? –
Tejs: Comme le mentionne Justin ci-dessous, un rappel sera lancé pour chaque élément de la collection. Félix, oui, je veux seulement lancer le rappel une fois. Décidé d'aller avec la réponse de microspino ci-dessous. –