Does jQuery “: animação” combinar itens do seletor que usam fadeIn () e fadeOut ()?

Question

Eu estou tentando evitar cliques em um item da lista, enquanto uma animação está ocorrendo. Assim, no topo da minha manipulador de clique, eu quero fazer algo como isto:

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

Observe o 'bang' (!) No caso afirmação acima. Eu não testei, mas presumo que isso vai funcionar. O que eu não tenho certeza é se '.is (: animados)' retornará true quando executado contra um elemento que está sendo animado via fadeIn () e fadeOut (). Eu sei que jQuery tem uma função .animate (), e eu assumo: animado certamente funciona contra elementos animados usando essa função, mas será que vai trabalhar com aqueles que utilizam fadeIn () e fadeOut ()? Obrigado.

UPDATE: Após alguns dramáticos mis-mensagens, tudo parece bem, e graças aos reponders para todos os grandes acompanhamentos e edições. No final, eu descobri que, sim,: jogos esses elementos animados usando fadeIn () e fadeOut (), porque os usos fonte jQuery .animate () para conseguir estes efeitos de animação. Meu check final foi originalmente postada:

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

.. em vez de usar .não () como foi proposto em alguns casos (embora eu acredito que estes trabalhos vontade como atualmente publicada). Obrigado mais uma vez.

Answer 1

Sim, :animated retornará verdadeiro para qualquer tipo de animação que jQuery cria. Ele também vai fazer isso por qualquer plugins que animam desde que use a função jQuery animate.

No entanto, você pode escrever seu código apenas uma pitada de forma diferente de fazer uso de jQuery:

Editar A função not não é o oposto de is. Ele filtra os nós, mas ainda retorna um objeto jQuery que avalia a true. Para usar a função not como eu originalmente sugerido, você teria que adicionar .length à prova:

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

Caso contrário, use a função como o OP originalmente publicado:

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

Answer 2

:animate irá corresponder a elementos que tiveram fadeOut chamado.

Se você olhar na fonte jQuery, você verá que fadeOut simplesmente chama animate.
É definido como este:

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

Você não precisa ter a declaração se lá em tudo. Você pode encadear o .não ( ': animado') antes de seu 'clique código'

.

Como exemplo, estes fades seria apenas trabalho se o div não estava no processo de ser animado, portanto, se livrar do problema de fila desagradável.

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

Ele iria trabalhar o mesmo para o .click () também.