Hat jQuery: Selektor Spiel Artikel „animiert“, die fadeIn () und fadeOut () verwenden?

Question

Ich versuche, klickt auf einen Listeneintrag zu verhindern, während eine Animation auftritt. So an der Spitze meines Click-Handler, mag ich so etwas wie dies tun:

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

Beachten Sie den 'Knall' (!) In der if-Anweisung oben. Ich habe nicht getestet, aber ich nehme an, das wird funktionieren. Was ich bin mir nicht sicher ist, ob ‚.is (: animiert)‘ true zurück, wenn sie gegen ein Element ausführen, das über fadeIn animiert wird () und fadeOut (). Ich weiß, dass jQuery eine .animate () Funktion hat, und ich nehme an: animated arbeitet sicherlich gegen Elemente animiert diese Funktion verwenden, aber es wird mit den Arbeiten mit fadeIn () und fadeOut ()? Danke.

UPDATE: Nach einigen dramatischen Fehl Beiträge, scheint alles gut, und dank der reponders für alle großen Follow-ups und Bearbeitungen. Am Ende habe ich festgestellt, dass, ja,: animierte Spiele animierten diese Elemente mit fadeIn () und fadeOut (), weil die Quelle jQuery verwendet .animate (), um diese Effekte zu erzielen. Meine letzte Prüfung wurde wie ursprünglich geschrieben:

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

.. anstatt .not () wie in einigen Fällen vorgeschlagen worden (obwohl ich diese glauben funktionieren, wie sie derzeit geschrieben). Nochmals vielen Dank.

Answer 1

Ja, :animated true zurück, für jede Art von Animation, die jQuery erstellt. Es wird auch für zusätzliche Plugins tun, dass sie die jQuery animate Funktion bereitgestellt animieren.

Sie können jedoch Ihren Code nur eine Prise anders schreiben Verwendung von jQuery zu machen:

Bearbeiten Die not Funktion nicht das Gegenteil von is ist. Es filtert Knoten, aber immer noch gibt ein jQuery-Objekt, das true auswertet. Um die not Funktion zu benutzen, wie ich ursprünglich vorgeschlagen, würden Sie haben .length zum Test hinzuzufügen:

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

Verwenden Sie andernfalls die Funktion als die OP ursprünglich geschrieben:

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

Answer 2

:animate werden Elemente entsprechen, die gehabt haben fadeOut genannt.

Wenn Sie in der jQuery Quelle anschauen, werden Sie sehen, dass fadeOut ruft einfach animate.
Es ist definiert wie folgt:

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

Sie müssen nicht die if-Anweisung haben, es überhaupt in. Sie können die Kette die .not ( ': animiert') vor Ihrem Klick-Code "

.

Als Beispiel würden diese Überblendungen nur funktionieren, wenn das div nicht im Begriff ist animiert werden, damit das bösen Schlange Problems loszuwerden.

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

Es wäre das gleiche für die .click arbeiten () als auch.