jquery animant plusieurs éléments

Question

Je suis en train de faire ce qui suit:

J'ai deux ensembles d'éléments DOM sur une page. Tous les éléments de la première série portent la display-element de classe, et le second ensemble d'éléments portent les edit-element de classe.

Maintenant, j'ai un bouton (id = edit-button). Lorsque je clique sur ce bouton, je veux tout le display-elements à disparaître, et tout le edit-elements comparais.

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é dans la décoloration

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

Merci
JRH

Answer 1

Pourquoi cela se produit, vraiment? Je veux dire, il semble que vous commencez les animations en même temps (il n'y a qu'un seul appel à .fadeOut après tout, non?). Je suppose, car $ () donne un tableau et lorsque vous appelez .fadeOut, itère jQuery dans le tableau et exécute ce qu'il effectue pour chacun de ses éléments. A partir de la première. Étant donné que le rappel se « attaché » à chaque animation, vous voyez l'effet visible de la première rappel.

Je suppose que, vous pouvez contourner ce en parcourant l'ensemble des éléments retournés vous et en vous assurant que vous attachez le rappel que la dernière.

$('#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

Eh bien, après avoir trouvé aucune 'méthode API nifty', je résolus à 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 3

La solution consiste à utiliser un setTimeout sur la décoloration en 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 millisecondes

Answer 4

Je viens de rencontrer un problème similaire et trouvé l'option de rappel « étape » a donné le comportement souhaité.

  

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

http://api.jquery.com/animate/

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 de l'animation. De cette façon, vous avez seulement un rappel déclenché lorsque l'animation se termine.