JQuery: Out Fondu, Exécution d'une action, puis Fondu Back In

Question

J'ai donc ce qui équivaut à une forme html, mais ne constitue pas une réelle <form>, en tant que tel. J'ai un bouton « Effacer » que je suis actuellement en utilisant pour réinitialiser tous les champs à leurs valeurs par défaut.

D'un point de vue esthétique, je voudrais que la forme à disparaître, réinitialiser alors qu'il est « parti », et disparaître complètement en arrière réinitialisé. J'ai ce code jusqu'à présent pour essayer d'y parvenir:

function Reset() {

    $formDiv.fadeOut(function() {

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

Cependant, ce qui se passe est, comme div est sortie en fondu, les champs se remis à zéro, afin que l'utilisateur les voit tout changer physiquement à leurs valeurs par défaut alors qu'il est sortie en fondu. Ensuite, il esquives dans dès qu'il a terminé la sortie en fondu. Fermer, mais je ne veux pas l'utilisateur de voir les champs obtenir remis à zéro. J'ai essayé le suivant il attendrait jusqu'à ce que le fadeOut terminé pour réinitialiser les champs, mais je suis une boucle infinie ou quelque chose (le navigateur dit que le script a été exécuté lentement et m'a demandé si je voulais l'arrêter):

function Reset() {

    $formDiv.fadeOut(function() {

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

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

Je ne suis pas vraiment sûr où aller d'ici. Toute aide serait appréciée. Merci.

Answer 1

J'ai eu ces derniers temps le même problème avec fadeOut qui semble fonctionner correctement, et j'ai trouvé la solution pour cela:

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

   //here changes to this element

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

Il semble même que fadeIn / fadeOut mais il fonctionne comme on s'y attend (les changements sont faits alors que l'élément est invisible)

J'espère que certains d'entre vous trouveront utile.

Answer 2

Utilisez

jQuery.stop().fadeOut() 

pour éviter de faire la queue de l'animation fadeOut.

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

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

Answer 3

Le rappel ne devrait vraiment pas tirer jusqu'à ce que l'animation est terminée. Avez-vous essayé d'installer une vitesse sur la fadeOut - la documentation (qui ne sont pas toujours exactes) montre comme un paramètre requis et il pourrait être juste si vous spécifiez un rappel - à savoir, il peut être évaluer la fonction que la vitesse si vous ne fournissez pas d'une façon explicite.

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

EDIT : Après avoir regardé à travers le code, il apparaît (en 1.3.2, au moins) que si vous fournissez une fonction comme premier argument, il évaluera et utiliser la valeur de retour comme la vitesse. Si vous spécifiez une vitesse, votre fonction de rappel, il devrait fonctionner comme prévu. L'élément doit disparaître, le rappel sera alors le feu et votre remise à zéro et se fanent dans le code sera exécuté.

Answer 4

Regardez dans .delay

Plus de détails: Régler la quantité de temps l'animation prendra pour fadeOut () et utiliser un retard pour l'animation fadeIn () qui est plus long que le temps d'animation fadeOut. Dans cet exemple, les actions de remise à zéro se produira lors de l'animation de fadeOut et sans doute pas prendre plus de 600 ms.

$formDiv.fadeOut(600,function() {

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

Edit: Oops, mal compris un peu le problème. Vous voulez la logique sous forme de remise à zéro pour être déclencheur sur l'appel fadeIn (), pas le fadeOut. Mais je pense qu'il est toujours bon de synchroniser les événements d'animation. Essayez quelque chose comme:

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