jQuery animando múltiples elementos

Question

Estoy tratando de hacer lo siguiente:

Tengo dos conjuntos de elementos DOM en una página. Todos los elementos en el primer set llevan la clase display-element, y el segundo conjunto de elementos lleva la clase edit-element.

Ahora tengo un botón (ID =edit-button). Cuando hago clic en este botón, quiero todo el display-elements para desvanecerse y todo el edit-elements a aparecer.

Naturalmente lo hice:

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

Para mi sorpresa, descubrí que esto no funcionaba como se esperaba. Esto es lo que sucedió: tan pronto como el primer elemento con clase display-element desvanecido, todo el edit-elements comenzó a desvanecerse.

Ahora hay una manera fácil (tal vez algo en la documentación que me perdí) usando el cual puedo tener todo el edit-elements empezar a desvanecer Solo después de todo display-elements ¿Se han desvanecido?

Gracias
jrh

Answer 1

¿Por qué sucedería esto, realmente? Quiero decir, parece que estás comenzando las animaciones al mismo tiempo (solo hay una llamada a .fadeOut Después de todo, ¿verdad?). Supongo que esto es porque $ () produce una matriz y cuando llamas .fadeOut, jQuery itera a través de la matriz y realiza lo que realice para cada uno de sus elementos. Comenzando desde el primero. Dado que la devolución de llamada se "adjunta" a cada animación, verá el efecto visible de la primera devolución de llamada.

Supongo que podrías esquivar esto iterando a través de la matriz de los elementos devueltos tú mismo y asegurándote de que adjuntas la devolución de llamada solo a la última.

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

Lo siento si el código está apagado, debo admitir que mi javascript-fu no es muy fuerte :)

Answer 2

Bueno, al no haber encontrado ningún 'método API ingenioso', resolví esto:

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

Esta es esencialmente la respuesta de @Shylent, con más 'javascript-fu' :)

Answer 3

La solución es usar un setTimeOut en la función de decoloración

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

Esa función de JavaScript retrasará el disparador de la función de desvanecimiento para 300 milisegundos

Answer 4

Acabo de ejecutar un problema similar y descubrí que la opción de devolución de llamada "paso" arrojó el comportamiento deseado.

Paso: una función a llamar después de cada paso de la animación.

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

Desplácese hacia abajo hasta la demostración para el uso de pasos y verá cómo le permitirá llamar a animar en un solo objeto y luego use el paso para actualizar el resto su conjunto en cada paso de la animación. De esta manera, solo tiene una devolución de llamada cuando se completa la animación.