jQuery - Cliquez sur Désactiver jusqu'à ce que tous enchaînés les animations sont complètes

Question

La solution ci-dessous est destiné à glisser vers le bas de la groupDiv affichage div1 et assez d'espace pour div2 de glisser dedans. Tout est réalisé en enchaînant les animations sur le #Lien.Cliquez sur() élément.

Il semble bug, si, lors de la lien est cliqué rapidement. Est-il un moyen pour éviter cela? Par exemple, la désactivation de la fonction de Clic jusqu'à ce que le enchaîné animations sont complètes? J'ai actuellement mis en place des contrôles, mais ils ne semblent pas faire le travail 🙁

Voici le code que j'utilise:

Personnalisé animer fonctions.

//Slide up or down and fade in or out
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
    if (this.is(":hidden")) {
        visibilityCheck("show", counter--);
        return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
    } else {
        visibilityCheck("hide", counter++);
        return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
    }
};

//Slide off page, or into overflow so it appears hidden.
jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
    if (this.css('marginLeft') == "-595px") {
        return this.animate({marginLeft: "0"}, speed, easing, callback);
    } else {
        return this.animate({marginLeft: "-595px"}, speed, easing, callback);
    }
};

Dans les dom prêt, j'ai ceci:

$('#Link').toggle(
    function() {
        if (!$("#div2 .tab").is(':animated')) {
            $("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
        }
    },
    function(){
        if (!$("#groupDiv").is(':animated')) {
            $('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
        }
    }
);

Structure HTML est: est-ce

<div id="groupDiv">
     <div id="div1">
          <div class="tab"></div>
     </div>
     <div id="div2">
          <div class="tab"></div>
     </div>
</div>
  • mise à jour de la réponse
InformationsquelleAutor Scotty | 2009-08-13
  1. 23

    La question est votre première animation de la div#GroupDiv de sorte que votre vérification initiale if (!$("#div2 .tab").is(':animated')) sera faux jusqu'à ce que le groupDiv a terminé l'animé et le rappel est tiré.

    Vous pourriez peut-être essayer 

    if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated'))

    cependant, je doute que cela va couvrir vraiment en cliquant sur rapide. Le plus sûr est de séparer l'événement à l'aide de

    $(this).unbind('toggle').unbind('click');

    la première ligne à l'intérieur de la si et vous pouvez ensuite les faire disparaître de l'animation de la vérifier. L'inconvénient de cette est que vous aurez à les relier à l'aide de la fonction de rappel vous êtes de passage à travers personnalisé fonctions d'animation.

    • Hmm ouais ça pourrait marcher. Sont il y a une sérieuse sur les côtés pour cette? Je vais lui donner un aller maintenant et de revenir à vous.
    • en dehors de la perf généraux de unbind/événements de liaison de pas grand-chose.
    • J'ai enlevé le si les déclarations de la bascule fonctions, et ajouté dans $(this).unbind('toggle'); Toutefois, il ne semble pas être la déliaison la bascule que ce soit. :S
    • essayez $(this).unbind('toggle').unbind('click');
    • Fonctionne un rêve! C'est la déliaison trié. Bien que, la liaison de nouveau dans le rappel de l'est pose un autre problème. $("groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .l'onglet').slideLeftToggle(700, "easeInOutCirc", function() { $(this).bind('toggle').bind('click');} );}); Jette en arrière une folle erreur découlant de la jquery.js fichier: TypeError: Résultat de l'expression " H " [non défini] n'est pas un objet. Donc je suis en supposant que quelque chose n'est pas transmis correctement par le biais de la fonction de rappel?
    • mon problème n'était pas le même mais cela a fonctionné pour moi

    InformationsquelleAutor redsquare
  2. 18

    Vous pouvez facilement désactiver vos liens, tandis que l'animation est en cours d'exécution

    $('a').click(function () {
    if ($(':animated').length) {
        return false;
    }
});

    Vous pouvez bien sûr remplacer le $('a') sélecteur de match seulement quelques-uns des liens.

    • C'est ce qu'il est en train de faire essentiellement
    • J'aime $('a').click(function () { if ($(this).is(':animated')) { return false; } }); un peu mieux.
    • votre code ne fonctionnera que si le lien est animé. Ma version vérifie si quoi que ce soit dans les DOM est animé.
    • Ouaip c'est correct. En fonction de ce que vous essayez d'accomplir, vérification de l'intérieur de la portée actuelle devrait être tout ce qui est nécessaire E. g. l'arrêt de plusieurs clics pour afficher et masquer un mobile de la valeur liquidative. ":animé" ne fait pas partie de la css, c'est une extension jQuery. Il fonctionne sans filtre, en particulier sur l'ensemble DOM (ce qui est recommandé) est très inefficace.
    InformationsquelleAutor RaYell
  3. 3

    Animer quelque chose qui peut être cliqué à plusieurs reprises est quelque chose à regarder dehors pour, car il est sujet aux erreurs. J'en déduis que vous Problème est que des animations en file d'attente et sont exécutées même quand vous avez arrêté de cliquant. La façon dont je l'ai résolu était d'utiliser la fonction stop() sur un Élément.

    Syntaxe: jQuery(sélecteur).stop(clearQueue,gotoEnd) //les deux paramètres sont de type boolean

    Plus D'Infos

    Lorsque je clique sur un bouton, j'ai d'abord arrêter l'animation et effacer la File d'attente, puis-je procéder pour définir la nouvelle animation sur elle. gotoEnd peut rester false (valeur par défaut), mais vous pouvez essayer tochange à true si vous voulez, vous pourriez aimer le résultat.

    Exemple d'utilisation: jQuery ('#touche clickMe').stop(true).animate({left:+=10}).

    • Ce n'est pas le fait qu'ils file d'attente, je me prévenir qu'avec l' :animation vérifier. C'est le fait qu'ils sortent de synchroniser les uns avec les autres à plus d'un titre.
    • a fonctionné assez bien pour moi! merci
    InformationsquelleAutor Mike
  4. 3

    vous pouvez mettre cette première chose à l'intérieur de l'événement click 

     $(element).css({ "pointer-events":"none"});

    et ce dans la fonction de rappel de l'animation 

     $(element).css({ "pointer-events":"auto"});

    • de loin la méthode la plus simple. Je l'ai trouvé également intéressant de l'appliquer à l'ensemble du conteneur limiter les éventuels conflits lors de l'animation s'exécute.
    InformationsquelleAutor Popa Marius
  5. 0

    vous pouvez séparer... mais cela devrait fonctionner aussi:

    if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated')) return;
    InformationsquelleAutor Jubair
  6. 0

    J'ai récemment fait une requête AJAX jQuery plugin, avec beaucoup d'animation. La solution de contournement à l'AJAX d'un bug d'animation que j'ai trouvé est comme suit.

        $(options.linkSelector).click(function(e){
    if ($("#yourNav").hasClass("disabled")) {
      return false;
    } else {
      e.preventDefault();
      $("#yourNav").addClass("disabled")
      //Prepare DOM for new content
      $(content).attr('id', 'content-old');
      $('<div/>', {id: 'ajMultiLeft'}).css({'top': '100%'}).insertAfter('#content-old');

      //Load new content
      $(content).load(linkSrc+ ' ' +options.content+ ' > *', function() {

      //Remove old content

      $(content).animate({top: '100%'}, 1000, function(){
        $(content-old).remove(); 
        $("#yourNav").removeClass("disabled")
      });

      setBase();
    }

    Ce que cela n'est fait à l'événement click pour chaque lien de répondre à rien, tandis que le div parent a une catégorie de personnes handicapées. Les handicapés de la classe est définie par la fonction de clic initiale et enlevés par un rappel sur l'animation finale.

    InformationsquelleAutor Alex Scott