JQuery: Ausblendung, die Durchführung einer Aktion, dann Fading Back In

Question

So habe ich was zu einer HTML-Form beträgt, ist aber nicht ein tatsächlicher <form>, per se. Ich habe eine Schaltfläche ‚Löschen‘, dass ich derzeit benutze alle Felder auf die Standardwerte zurück zu setzen.

Aus ästhetischer Sicht würde ich für die Form darauf verblassen, zurückgesetzt, während es der „weg“, und verblasste wieder vollständig zurückgesetzt. Ich habe diesen Code wurde so weit, um zu versuchen, dies zu erreichen:

function Reset() {

    $formDiv.fadeOut(function() {

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

Doch was passiert, ist, wie die div schwindet aus, die Felder zurückgesetzt erhalten, so dass der Benutzer sieht sie alle körperlich wieder auf die Standardeinstellungen ändern, während es aus ist verblasst. Dann verschwindet es wieder in, sobald es Ausblendung beendet hat. Close-up, aber ich will nicht der Benutzer die Felder sehen zurückgesetzt bekommen. Ich habe versucht, die folgenden, so dass es warten würde, bis die fadeOut die Felder zurücksetzen abgeschlossen, aber ich habe eine Endlosschleife oder etwas (der Browser sagte das Skript langsam lief und fragte mich, ob ich ihn stoppen wollte):

function Reset() {

    $formDiv.fadeOut(function() {

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

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

Also ich bin nicht wirklich sicher, wohin man von hier zu gehen. Jede Hilfe wäre sehr geschätzt. Danke.

Answer 1

Ich hatte das gleiche Problem in letzter Zeit mit fadeOut, die falsch zu funktionieren scheinen, und ich fand die Lösung für sie:

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

   //here changes to this element

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

Es sieht genauso aus wie fadeIn / fadeOut aber es funktioniert wie erwartet (Änderungen vorgenommen werden, während das Element unsichtbar ist)

Ich hoffe, dass einige von Ihnen werden es nützlich finden.

Answer 2

Mit

jQuery.stop().fadeOut() 

verhindern, dass die fadeOut Animation, Schlange stehen.

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

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

Answer 3

Der Rückruf sollte wirklich erst ausgelöst, wenn die Animation abgeschlossen ist. Haben Sie versucht, eine Geschwindigkeit auf der fadeOut Einstellung - die Dokumentation als einen erforderlichen Parameter zeigt (was nicht immer korrekt ist) und es könnte nur sein, wenn Sie einen Rückruf angeben - dh es kann die Funktion als die Geschwindigkeit evaluieren wenn Sie eine nicht explizit liefern.

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

Bearbeiten : Nach dem durch den Code sucht, scheint es (in 1.3.2, zumindest), dass, wenn Sie eine Funktion als erstes Argument liefern, es auswerten wird und verwenden Sie den Rückgabewert als die Geschwindigkeit. Wenn Sie eine Geschwindigkeit angeben, dann wird Ihre Callback-Funktion sollte es funktionieren wie erwartet. Das Element sollte ausgeblendet, wird der Rückruf dann Feuer und Ihre zurückgesetzt und verblassen in Code ausgeführt wird.

Answer 4

Schauen Sie in .delay

Weitere Einzelheiten: Stellen Sie die Zeit, die Animation für fadeOut nehmen () und verwendet, um eine Verzögerung für die fadeIn () Animation, die länger ist als die fadeOut Animationszeit ist. In diesem Beispiel werden die Reset-Aktionen während der fadeOut Animation passieren und vermutlich nicht länger dauern als 600 ms.

$formDiv.fadeOut(600,function() {

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

Edit: Ups, falsch verstanden leicht das Problem. Sie wollen, dass die Logik-Reset Form Auslöser, um auf der fadeIn () -Aufruf, nicht den fadeOut. Aber ich denke, es ist immer noch gut, die Animation Ereignisse zu synchronisieren. Versuchen Sie so etwas wie:

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