JQuery: Fading Out, Performing an Action, then Fading Back In

Question

So I have what amounts to an html form, but is not an actual <form>, per se. I have a 'Clear' button that I am currently using to reset all of the fields back to their defaults.

From an aesthetic standpoint, I would like for the form to fade out, reset while it's "gone", and fade back in completely reset. I've got this code so far to try to achieve this:

function Reset() {

    $formDiv.fadeOut(function() {

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

However, what happens is, as the div is fading out, the fields get reset, so the user sees them all physically change back to their defaults while it's fading out. Then it fades back in as soon as it has finished fading out. Close, but I don't want the user to see the fields getting reset. I tried the following so it would wait until the fadeOut completed to reset the fields, but I got an infinite loop or something (the browser said the script was running slowly and asked me if I wanted to stop it):

function Reset() {

    $formDiv.fadeOut(function() {

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

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

So I'm not really sure where to go from here. Any help would be appreciated. Thanks.

Answer 1

I had the same problem lately with fadeOut that seems to be working incorrectly, and I found the solution for it:

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

   //here changes to this element

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

It looks the same as fadeIn/fadeOut but it works as is expected (changes are made while element is invisible)

I hope some of you will find it useful.

Answer 2

Use

jQuery.stop().fadeOut() 

to prevent queueing up the fadeOut Animation.

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

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

Answer 3

The callback really shouldn't fire until the animation has completed. Have you tried setting a speed on the fadeOut -- the documentation (which isn't always accurate) shows it as a required parameter and it just might be if you specify a callback -- i.e., it may be evaluating the function as the speed if you don't supply one explicitly.

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

EDIT: After looking through the code, it appears (in 1.3.2, at least) that if you supply a function as the first argument, it will evaluate it and use the return value as the speed. If you specify a speed, then your callback function it should work as you expect. The element should fade out, the callback will then fire and your reset and fade in code will be executed.

Answer 4

Look into .delay

More detail: Set the amount of time the animation will take for fadeOut(), and use a delay for the fadeIn() animation that is longer than the fadeOut animation time. In this example, the reset actions will happen during the fadeOut animation and presumably not take longer than 600 ms.

$formDiv.fadeOut(600,function() {

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

Edit: Oops, misunderstood the problem slightly. You want the reset form logic to be trigger on the fadeIn() call, not the fadeOut. But I think it's still good to synchronize the animation events. Try something like:

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