Comment éviter cet étrange jQuery .animate () lag?

Voir démo: jsFiddle

  • J'ai un formulaire simple qui est activée lorsque vous cliquez sur "afficher" /"annuler"
  • Tout fonctionne bien, mais si vous cliquez sur "annuler", peu de temps après la forme est révélé, il y a un bon 2-3 secondes de latence avant que l'animation commence même.
  • Cela ne se produit pas si vous attendez quelques secondes avant de cliquer sur 'annuler'.
  • Le décalage se fait dans tous les navigateurs testés (ie, ff, chrome).

1. Quelle est la cause de ce retard et comment peut-il être évité?

2. Est-il une meilleure façon de coder cette séquence d'animations, qui peuvent empêcher toute gal?

HTML:

<div id="newResFormWrap">
    <form id="newResForm" action="" method="post" name="newRes">
        <div id="newResFormCont">
            <h3>title</h3>
            <p>form!</p>
            <div class="button" id="cancelNewRes">Cancel</div>
        </div>
    </form> 
</div>
<div class="button" id="addRes">show</div>

jQuery:

$("#newResForm").css({opacity: 0});

$("#addRes").click(function () {
    toggleNewRes()
});
$("#cancelNewRes").click(function () {
    toggleNewRes()
});

//toggleNewRes
function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").animate({ opacity: 0 }, 'fast', function() {
            $("#newResFormWrap").toggle('fast', function (){
                $("#newResForm").animate({ opacity: 100 },2000);
            });
        });
    } else { //if visible
        $("#newResForm").animate({ opacity: 0 }, 100,function() {
            $("#newResFormWrap").toggle('fast', function (){
                $("#addRes").animate({ opacity: 100 });
            });
        });
    }
}

source d'informationauteur Roy

  1. 22

    Assurez-vous d'effacer la file d'attente lors du démarrage d'une nouvelle animation avec stop():

    $("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#addRes").animate({ opacity: 100 }); 
                 //...

    Quelle est la cause de ce retard est le fait que votre long 2-deuxième animation $("#newResForm").animate({ opacity: 100 },2000) n'est pas encore terminée. JQuery met les animations par défaut dans une file d'attente, en attendant une à terminer avant le début de la prochaine. Vous effacer la file d'attente avec stop()ce qui est particulièrement utile si vous disposez de deux contredire animations (comme l'ouvrir et de fermer l'animation, ou un mouseover/mouseout animation). En fait, vous trouverez peut-être une bonne pratique pour commencer à tous de votre animation avec les chaînes de stop()sauf si vous savez que vous le souhaitez à la file d'attente avant d'animations qui peuvent avoir eu lieu ailleurs.

    D'entrer dans des sujets plus avancés, vous pouvez même nom de différentes files d'attente, de sorte que, par exemple, votre hover animations et votre agrandir/réduire les animations sont traités séparément aux fins de stop(). Voir la queue option (une chaîne de caractères) à http://api.jquery.com/animate/ pour plus de détails.

  2. 1

    Essayez d'utiliser stop() :

    Voici jsfiddle.

    if ($("#newResFormWrap").is(':visible')) {//this way is eaiser to check
    $("#addRes").stop(true,false).animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#newResForm").animate({ opacity: 100 },2000);
        });
    });
}
  3. 1

    Couple de choses. Tout d'abord extraire ce JSFiddle de le voir en action.

    Le problème que vous avez, c'est que votre fondu dans l'animation prend 2 secondes. Ainsi, lorsque vous la fermer dans un délai de 2 secondes, vous subissez un retard.

    J'ai recalibré votre minutage pour s'assurer il n'y a pas de retard. Voir si vous les aimez et n'hésitez pas à les modifier comme vous le souhaitez.

    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
    $("#addRes").animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle(0, function (){
            $("#newResForm").animate({ opacity: 100 },400);
        });
    });
} else { //if visible
    console.log('click');
    $("#newResForm").animate({ opacity: 0 }, 0, function() {
        console.log('animated');
        $("#newResFormWrap").toggle(0)
    });
    $("#addRes").animate({ opacity: 100 }, 'fast');
}
  4. 1

    Ajouter .stop() avant votre animer des appels:

    function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").stop().animate({ opacity: 0 }, 'fast', function() {
            /...
        });
    } else { //if visible
        $("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
            /...
        });
    }
}