JQuery: la dissolvenza in chiusura, l'esecuzione di un'azione, poi dissolvenza Back In

Question

Quindi devo ciò che equivale a un modulo HTML, ma non è un vero e proprio <form>, di per sé. Ho un tasto 'Cancella' che sono attualmente in uso per ripristinare tutti i campi ai valori predefiniti.

Dal punto di vista estetico, vorrei che il modulo per fade out, reimpostare mentre "andato", e dietro di essa la dissolvenza in completamente azzerato. Ho questo codice finora per cercare di raggiungere questo obiettivo:

function Reset() {

    $formDiv.fadeOut(function() {

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

Tuttavia, ciò che accade è, come il div sta svanendo fuori, i campi diventano di reset, in modo che l'utente li vede cambiano fisicamente ai valori predefiniti mentre è dissolvenza. Poi si affievolisce nel non appena ha finito di dissolvenza. Vicino, ma non voglio all'utente di vedere i campi ottenendo reset. Ho provato quanto segue quindi sarebbe attendere che il fadeOut completato per ripristinare i campi, ma ho avuto un ciclo infinito o qualcosa (il browser ha detto che la sceneggiatura era in esecuzione lentamente e mi ha chiesto se volevo fermarlo):

function Reset() {

    $formDiv.fadeOut(function() {

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

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

Quindi io non sono davvero sicuro dove andare da qui. Qualsiasi aiuto sarebbe apprezzato. Grazie.

Answer 1

Ho avuto lo stesso problema ultimamente con fadeOut che sembra funzionare in modo non corretto, e ho trovato la soluzione per esso:

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

   //here changes to this element

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

Sembra la stessa fadeIn / fadeOut ma funziona come ci si aspetta (vengono apportate modifiche mentre l'elemento è invisibile)

Spero che alcuni di voi lo troveranno utile.

Answer 2

Usa

jQuery.stop().fadeOut() 

per evitare la fila alla Animazione fadeOut.

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

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

Answer 3

Il callback in realtà non dovrebbe sparare fino a quando l'animazione è stata completata. Avete provato a installare una velocità sul fadeOut - la documentazione (che non è sempre preciso) mostra come parametro richiesto e che potrebbe essere solo se si specifica un callback - vale a dire, si può valutare la funzione della velocità se non si fornisce un modo esplicito.

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

Modifica : Dopo aver guardato attraverso il codice, appare (in 1.3.2, almeno) che se si fornisce una funzione come primo argomento, si valuterà e utilizzare il valore restituito come la velocità. Se si specifica una velocità, allora la vostra funzione di callback dovrebbe funzionare come previsto. L'elemento dovrebbe fade out, sarà poi verrà eseguito il callback del fuoco e la tua reset e fade in codice.

Answer 4

.delay

Più particolare: Impostare la quantità di tempo l'animazione avrà per fadeOut (), e utilizzare un ritardo per l'animazione fadeIn (), che è più lungo del tempo di animazione fadeOut. In questo esempio, le azioni di ripristino avverrà durante l'animazione fadeOut e presumibilmente non richiedere più di 600 ms.

$formDiv.fadeOut(600,function() {

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

Edit: Oops, frainteso un po 'il problema. Si desidera che il modulo logica di reset per essere grilletto della chiamata fadeIn (), non il fadeOut. Ma penso che sia ancora buono per sincronizzare gli eventi di animazione. Provare qualcosa di simile:

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