jquery animation de plusieurs éléments

Question

J'essaye de faire ce qui suit:

J'ai deux ensembles d'éléments DOM sur une page. Tous les éléments du premier ensemble portent la classe display-element, et le deuxième ensemble d'éléments porte la classe edit-element.

Maintenant, j'ai un bouton (id = edit-button). Quand je clique sur ce bouton, je veux que tous les display-elements disparaissent, et tous les edit-elements apparaissent.

Je naturellement ai fait:

$('#edit-button').click(function(){ 
    $('.display-element').fadeOut(300, function() { 
     $('.edit-element').fadeIn(300); 
    }); 
}); 

J'ai trouvé à ma grande surprise que cela ne fonctionne pas comme prévu. Ce qui est arrivé: dès le premier élément avec la classe display-element fané dehors, tout le edit-elements a commencé la décoloration dans

Maintenant, est-il un moyen facile (peut-être quelque chose dans la documentation que j'ai raté) à l'aide que je peux avoir tout. edit-elements commencer à s'estomper dans seulement après que tout display-elements s'est estompé?

Merci
HJR

Answer 1

Pourquoi cela se produit, vraiment? Je veux dire, il semble que vous démarrez les animations en même temps (il n'y a qu'un seul appel à .fadeOut après tout, non?). Je suppose que c'est parce que $() donne un tableau et quand vous appelez .fadeOut, jQuery parcourt le tableau et effectue tout ce qu'il effectue pour chacun de ses éléments. À partir du premier. Puisque le rappel est "attaché" à chaque animation, vous voyez l'effet visible du premier rappel. J'imagine que vous pourriez contourner cela en parcourant le tableau des éléments retournés vous-même et en vous assurant que vous ne reliez le rappel qu'au dernier.

$('#edit-button').click(function(){ 
    var display_elements = $('.display-element'); 
    var len = display_elements.length; 
    for (var i = 0; i < len-1; i++) { 
     $(display_elements[i]).fadeOut(300); // no callback 
    } 
    $(display_elements[len-1]).fadeOut(300, function() { 
     $('.edit-element').fadeIn(300); 
    }); // last element - attach callback 
}); 

Je suis désolé si le code est éteint, je dois admettre que mon javascript-fu est pas très forte :)

Answer 2

La solution est d'utiliser un setTimeout sur la disparition progressive de la fonction

$('#edit-button').click(function(){ 
    $('.display-element').fadeOut(300); 
setTimeout("$('.edit-element').fadeIn(300);", 300); 
}); 

cette fonction javascript va retarder le déclenchement du la disparition progressive de la fonction 300 miliseconds

Answer 3

Eh bien, ayant trouvé aucune « méthode API nifty », je résolus de ceci:

$('#edit-button').click(function() { 
    var displays = $('.display-element'); 
    var counter = 0; 
    var max = displays.length; 
    displays.fadeOut(300, function() { 
     counter++; 
     if(counter>=max) $('.input-element').fadeIn(300); 
    } 
}); 

Ceci est essentiellement @ la réponse de shylent, avec plus 'javascript-fu :)

Answer 4

J'ai juste couru un problème similaire et a trouvé l'option de rappel « étape » a donné le comportement souhaité.

étape: Une fonction à appeler après chaque étape de l'animation.

^

Faites défiler jusqu'à la démonstration pour l'utilisation de l'étape et vous verrez comment il vous permettra d'appeler animer sur un seul objet puis utilisez pas pour mettre à jour le reste de votre jeu à chaque étape l'animation. De cette façon, vous n'avez qu'un rappel déclenché à la fin de l'animation.