Wie finde ich mit jQuery heraus, ob ein Element animiert wird?

101

Ich versuche, einige Elemente auf der Seite zu verschieben. Während der Animation möchte ich "Überlauf: versteckt" auf ein Element anwenden und "Überlauf" zurück auf "Auto", sobald die Animation abgeschlossen ist.

Ich weiß, dass jQuery eine Dienstprogrammfunktion hat, die bestimmt, ob ein Element animiert wird, aber ich kann es nirgendwo in den Dokumenten finden

javascript jquery animation

199

if( $(elem).is(':animated') ) {...}

Weitere Informationen : https://api.jquery.com/animated-selector/

Oder:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };

— James
quelle

Ja das war es, danke. wie könnte ich es vermissen? Verdammt, ich werde alt

Zu Ihrer Information, wenn Sie nicht riskieren möchten, Ihre CSS-Stile zu überschreiben, indem Sie im Rückruf "overflow: auto" programmieren, verwenden Sie einfach .css('overflow', ''). Durch das Übergeben einer leeren Zeichenfolge wird diese Eigenschaft im Allgemeinen vollständig aus dem Stil des Elements entfernt. Ich bin mir nicht sicher, ob dies ein dokumentiertes Verhalten ist, aber es ist ein sehr nützlicher Trick.

— Ward DS

2

Ich glaube nicht, dass es CSS-Animationen unterstützt.

— Gqqnbig

5

Um zu testen, ob etwas nicht animiert ist, können Sie alternativ einfach ein "!" Hinzufügen:

if (!$(element).is(':animated')) {...}

— Tim
quelle

Dies ist sehr nicht wahr ... Das Gegenteil von jquery "ist" ist nicht "nicht". 'not' entfernt gefilterte Elemente aus dem jquery-Objekt. Wenn Sie nach nicht animierten Objekten if (!$(element).is(':animated')) {...}

— suchen

1

@amosmos Die Antwort wurde bearbeitet und von der Community genehmigt. Ich habe sie zurückgesetzt, wo sie korrekt war.

— Bill

2

Großartig, nur jetzt ist es ein Duplikat der akzeptierten Antwort. Übrigens, was bedeutet es, von der Community genehmigt zu werden?

— Amosmos

@amosmos aufhören zu trollen

— Eric Cicero

1

Wenn Sie eine cssAnimation verwenden und die Animation mithilfe einer bestimmten Animation zuweisen class name, können Sie dies folgendermaßen überprüfen:

if($("#elem").hasClass("your_animation_class_name")) {}

Stellen Sie jedoch sicher, dass Sie den Klassennamen entfernen, der die Animation verarbeitet, nachdem die Animation beendet ist!

Mit diesem Code können Sie Folgendes entfernen, class namenachdem die Animation beendet wurde:

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});

— Ari
quelle

OP verwendet jQuery animaiton.

— Michał Perłakowski

Ich schlage nur eine Alternative vor. Und meintest du Animation?

— Ari

Ja, ich meinte Animation. IMO ist Ihre Antwort völlig unangebracht.

— Michał Perłakowski

0

Wenn Sie CSS auf animierte Elemente anwenden möchten, können Sie den :animatedPseudo-Selektor verwenden und dies folgendermaßen tun:

$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');

Quelle: https://learn.jquery.com/using-jquery-core/selecting-elements/

— Glücklich
quelle

0

$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});

— anand vishwakarma
quelle

Während dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum das Problem gelöst wird, den langfristigen Wert der Antwort verbessern. Bitte lesen Sie diese Anleitung, um eine qualitativ hochwertige Antwort zu erhalten.

— thewaywewere