Est-ce que jQuery & # 8220;: animé & # 8221; sélecteur faire correspondre les éléments qui utilisent fadeIn () et fadeOut ()?

Question

J'essaie d'empêcher les clics sur un élément de la liste lorsqu'une animation est en cours. Donc, en haut de mon gestionnaire de clics, je veux faire quelque chose comme ceci:

if(!$(this).is(:animated)) {
    // handle click code here
}

Notez le "bang" (!) dans la déclaration if ci-dessus. Je n'ai pas testé, mais je suppose que cela fonctionnera. Ce dont je ne suis pas sûr, c'est si '.is (: animated)' retournera true lorsqu'il sera exécuté sur un élément animé via fadeIn () et fadeOut (). Je sais que jQuery a une fonction .animate (), et je suppose: animated fonctionne contre les éléments animés utilisant cette fonction, mais fonctionnera-t-il avec ceux qui utilisent fadeIn () et fadeOut ()? Merci.

MISE À JOUR: Après quelques erreurs de publication dramatiques, tout semble aller pour le mieux, et ce grâce aux reponders pour tous les excellents suivis et modifications. En fin de compte, j’ai trouvé que, oui, l’animation correspond aux éléments animés à l’aide de fadeIn () et fadeOut (), car la source jQuery utilise .animate () pour obtenir ces effets. Mon dernier chèque était celui qui avait été posté:

<*>

.. plutôt que d'utiliser .not () comme cela a été proposé dans certains cas (bien que je pense que ceux-ci fonctionneront tels qu'ils sont actuellement publiés). Merci encore.

Answer 1

Oui, : animated retournera la valeur true pour toute sorte d'animation créée par jQuery. Il le fera également pour tous les plugins qui animent s’ils utilisent la fonction jQuery animate .

Cependant, vous pouvez écrire votre code différemment pour utiliser jQuery:

Modifier La fonction not n'est pas l'inverse de est . Il filtre les noeuds, mais renvoie néanmoins un objet jQuery dont le résultat est true . Pour utiliser la fonction not comme je l’avais initialement suggéré, vous devez ajouter .length au test:

if( $(this).not(':animated').length ) {
    // Handle click code here
}

Sinon, utilisez la fonction comme OP initialement publié:

if( !$(this).is(':animated')) {
    // Handle click code here
}

Answer 2

: animate correspondra aux éléments qui ont fait appeler fadeOut .

Si vous regardez dans la source jQuery, vous verrez que fadeOut appelle simplement animate .
C'est défini comme ceci:

// Generate shortcuts for custom animations
jQuery.each({
    slideDown: genFx("show", 1),
    slideUp: genFx("hide", 1),
    slideToggle: genFx("toggle", 1),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" }
}, function( name, props ){
    jQuery.fn[ name ] = function( speed, callback ){
        return this.animate( props, speed, callback );
    };
});

Answer 3

Vous n’avez pas besoin de la déclaration if. Vous pouvez chaîner le .not (': animé') avant votre 'code de clic'.

Par exemple, ces fondus ne fonctionneraient que si la div n’était pas en train d’être animée, éliminant ainsi le problème de la mauvaise file d'attente.

$('a#show_me').toggle(function() {
    $('div#the_money').not(':animated').fadeIn();
}, function() {
    $('div#the_money').not(':animated').fadeOut();
});

Cela fonctionnerait de la même manière pour le .click () également.