Come faccio a sapere con jQuery se un elemento viene animato?

101

Sto provando a spostare alcuni elementi nella pagina e durante il tempo in cui si verifica l'animazione, voglio che "overflow: hidden" venga applicato a un elemento e che "overflow" torni su "auto" una volta completata l'animazione.

So che jQuery ha una funzione di utilità che determina se qualche elemento viene animato ma non riesco a trovarlo da nessuna parte nei documenti

javascript jquery animation

199

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

Maggiori informazioni : https://api.jquery.com/animated-selector/

O:

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

— Giacomo
fonte

si è così, grazie. come potrei perderlo? accidenti, sto invecchiando

Cordiali saluti, se non vuoi rischiare di sovrascrivere i tuoi stili CSS programmando "overflow: auto" nel callback, usa semplicemente .css('overflow', ''). Il passaggio di una stringa vuota generalmente rimuove completamente quella proprietà dallo stile dell'elemento. Non sono sicuro che questo sia un comportamento documentato, ma è un trucco molto utile.

— Ward DS

2

Non credo che supporti le animazioni CSS.

— Gqqnbig

5

In alternativa, per verificare se qualcosa non è animato, puoi semplicemente aggiungere un "!":

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

— Tim
fonte

Questo non è assolutamente vero ... L'opposto di jquery "è" non è "non". 'not' rimuove gli elementi filtrati dall'oggetto jquery. Se vuoi controllare gli oggetti non animati che faiif (!$(element).is(':animated')) {...}

— amosmos

1

@amosmos La risposta è stata modificata e approvata dalla comunità .. L'ho riportata al punto in cui era corretta.

— Fattura

2

Fantastico, solo che ora è un duplicato della risposta accettata. BTW cosa significa approvato dalla comunità?

— amosmos

@amosmos stop trolling

— Eric Cicero,

1

se stai usando l' cssanimazione e assegni l'animazione usando specifica class name, puoi controllarla in questo modo:

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

Ma assicurati di rimuovere il nome della classe che gestisce l'animazione, dopo che l'animazione è terminata!

Questo codice può essere utilizzato per rimuovere il class namedopo che l'animazione è terminata:

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

— Ari
fonte

OP sta usando jQuery animaiton.

— Michał Perłakowski

suggerendo solo un'alternativa. E volevi dire animazione?

— Ari

Sì, intendevo l'animazione. IMO la tua risposta è completamente fuori tema.

— Michał Perłakowski

0

Se vuoi applicare css agli elementi animati, puoi usare lo :animatedpseudo selettore e farlo in questo modo,

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

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

— Fortunato
fonte

0

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

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

— anand vishwakarma
fonte

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo su come e / o perché risolve il problema migliorerebbe il valore a lungo termine della risposta. Si prega di leggere questo how-to-risposta per la fornitura di risposta di qualità.

— thewaywere