JQuery: desvanecimiento, realizando una acción, entonces Fading Back In

Question

Así que tengo lo que equivale a un formulario HTML, pero no es un <form> real, per se. Tengo un botón de 'Borrar' que estoy usando actualmente para restablecer todos los campos en sus valores predeterminados.

Desde un punto de vista estético, me gustaría que la forma a desaparecer, restablezca mientras que es, y de vuelta fade "desaparecido" en restablecer por completo. Tengo este código hasta el momento para tratar de lograr esto:

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

Sin embargo, lo que sucede es, como el div se está desvaneciendo, los campos reconfiguradas, por lo que el usuario ve a todos ellos cambian físicamente en sus valores predeterminados mientras que está desapareciendo. A continuación, se desvanece de nuevo en tan pronto como se haya terminado desapareciendo. Cerca, pero no quiero que el usuario vea los campos que consiguen reajuste. He intentado lo siguiente por lo que sería esperar hasta que el fadeOut completado para restablecer los campos, pero tengo un bucle infinito o algo (el navegador dijo el guión corría lentamente y me preguntó si quería detenerlo):

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}

Así que no estoy realmente seguro de a dónde ir desde aquí. Cualquier ayuda sería apreciada. Gracias.

Answer 1

Yo tenía el mismo problema últimamente con fadeOut que parece estar funcionando incorrectamente, y he encontrado la solución para ello:

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

Se ve igual que fadeIn / fadeOut pero funciona como se espera (los cambios se realizan mientras que el elemento es invisible)

Espero que algunos de ustedes se encuentren útil.

Answer 2

Uso

jQuery.stop().fadeOut() 

para evitar la cola de Animación fadeOut.

.stop() can be used to prevent queueing any jQuery Animation 

http://api.jquery.com/stop/

Answer 3

La devolución de llamada debe realmente no disparar hasta que la animación se ha completado. ¿Ha intentado establecer una velocidad en la fadeOut - la documentación (que no siempre es exacto) lo muestra como un parámetro requerido y que sólo podría ser si se especifica una devolución de llamada - es decir, se puede evaluar la función como la velocidad Si no se proporciona una forma explícita.

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

Editar : Después de mirar a través del código, aparece (en 1.3.2, por lo menos) que si se suministra una función como primer argumento, que lo evaluará y utilizar el valor de retorno como la velocidad. Si especifica una velocidad, entonces su función de devolución de llamada que debería funcionar como se espera. El elemento debe desaparecer, la devolución de llamada será entonces el fuego y el reset y se desvanecen en el código se ejecutará.

Answer 4

.delay

Más detalle: Establece la cantidad de tiempo que la animación se llevará a fadeOut (), y el uso de un retraso para la animación fadeIn () que es más largo que el tiempo de animación fadeOut. En este ejemplo, las acciones de restablecimiento sucederán durante la animación fadeOut y, presumiblemente, no tomar más de 600 ms.

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

Edit: Vaya, mal entendido un poco el problema. Desea que la lógica de la forma de reposición sea gatillo de la llamada fadeIn (), no el fadeOut. Pero creo que aún así es buena para sincronizar los eventos de animación. Pruebe algo como:

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});