JQuery & # 8220;: animato & # 8221; selettore abbina elementi che usano fadeIn () e fadeOut ()?

Question

Sto cercando di impedire i clic su un elemento dell'elenco mentre si verifica un'animazione. Quindi nella parte superiore del mio gestore di clic, voglio fare qualcosa del genere:

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

Nota 'bang' (!) nell'istruzione if precedente. Non ho ancora testato, ma suppongo che funzionerà. Ciò di cui non sono sicuro è se '.is (: animato)' restituirà true quando eseguito contro un elemento che viene animato tramite fadeIn () e fadeOut (). So che jQuery ha una funzione .animate (), e presumo: animato sicuramente funziona contro elementi animati usando quella funzione, ma funzionerà con quelli che usano fadeIn () e fadeOut ()? Grazie.

AGGIORNAMENTO: dopo alcuni drammatici post sbagliati, tutto sembra a posto, e grazie ai ripetitori per tutti i grandi follow-up e le modifiche. Alla fine, ho scoperto che sì: animato corrisponde a quegli elementi animati usando fadeIn () e fadeOut () perché la fonte jQuery usa .animate () per ottenere questi effetti. Il mio controllo finale era come inizialmente pubblicato:

<*>

.. piuttosto che usare .not () come è stato proposto in alcuni casi (anche se credo che funzioneranno come attualmente pubblicato). Grazie ancora.

Answer 1

Sì, : animato restituirà true per qualsiasi tipo di animazione creata da jQuery. Lo farà anche per tutti i plugin che si animano purché utilizzino la funzione jQuery animate .

Tuttavia, puoi scrivere il tuo codice solo un pizzico in modo diverso per usare jQuery:

Modifica La funzione not non è l'opposto di è . Filtra i nodi, ma restituisce comunque un oggetto jQuery che valuta true . Per utilizzare la funzione not come inizialmente suggerito, è necessario aggiungere .length al test:

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

Altrimenti, utilizzare la funzione come OP originariamente pubblicato:

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

Answer 2

: animate corrisponderà agli elementi per i quali è stato chiamato fadeOut .

Se guardi nella fonte jQuery, vedrai che fadeOut chiama semplicemente animate .
È definito in questo modo:

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

Non è necessario avere l'istruzione if presente. Puoi concatenare il .not (': animato') prima del tuo 'codice clic'.

Ad esempio, queste dissolvenze funzionerebbero solo se il div non fosse in procinto di essere animato, quindi eliminando il brutto problema della coda.

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

Funzionerebbe allo stesso modo anche per .click ().