¿El selector jQuery ": animado" coincide con elementos que usan fadeIn () y fadeOut ()?

Question

Estoy tratando de evitar clics en un elemento de la lista mientras se produce una animación. Entonces, en la parte superior de mi controlador de clics, quiero hacer algo como esto:

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

Tenga en cuenta la 'explosión' (!) en la declaración if anterior. No lo he probado, pero supongo que esto funcionará. De lo que no estoy seguro es si '.is (: animated)' volverá verdadero cuando se ejecute contra un elemento que se está animando a través de fadeIn () y fadeOut (). Sé que jQuery tiene una función .animate (), y supongo: animado ciertamente funciona contra elementos animados usando esa función, pero ¿funcionará con aquellos que usan fadeIn () y fadeOut ()? Gracias.

ACTUALIZACIÓN: Después de algunas publicaciones erróneas dramáticas, todo parece estar bien, y gracias a los respondedores por todos los excelentes seguimientos y ediciones. Al final, descubrí que sí: animada coincide con los elementos animados usando fadeIn () y fadeOut () porque la fuente jQuery usa .animate () para lograr estos efectos. Mi verificación final fue la publicada originalmente:

<*>

... en lugar de usar .not () como se ha propuesto en algunos casos (aunque creo que estos funcionarán como están publicados actualmente). Gracias de nuevo.

Answer 1

Sí, : animated devolverá verdadero para cualquier tipo de animación que cree jQuery. También lo hará para cualquier complemento que se anime siempre que use la función jQuery animate .

Sin embargo, puede escribir su código de forma diferente para hacer uso de jQuery:

Editar La función not no es lo contrario de is . Filtra los nodos, pero aún devuelve un objeto jQuery que se evalúa como true . Para usar la función not como sugerí originalmente, tendría que agregar .length a la prueba:

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

De lo contrario, use la función como el OP publicado originalmente:

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

Answer 2

: animate coincidirá con elementos a los que se haya llamado fadeOut .

Si busca en la fuente jQuery, verá que fadeOut simplemente llama a animate .
Se define así:

// 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

No es necesario que tenga la declaración if en absoluto. Puede encadenar el .not (': animado') antes de su 'código de clic'.

Como ejemplo, estos desvanecimientos solo funcionarían si el div no estuviera en proceso de animación, por lo tanto, deshacerse del desagradable problema de la cola.

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

Funcionaría igual para .click () también.