¿Cómo averiguo con jQuery si se está animando un elemento?

101

Estoy tratando de mover algunos elementos en la página, y durante el tiempo que ocurre la animación, quiero que se aplique "overflow: hidden" a un elemento, y "overflow" de nuevo a "auto" una vez que se complete la animación.

Sé que jQuery tiene una función de utilidad que determina si algún elemento está siendo animado, pero no puedo encontrarlo en ningún lugar de los documentos.


fuente

Respuestas:

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

Más información : https://api.jquery.com/animated-selector/


O:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };
James
fuente
si eso fue todo, gracias. ¿Cómo podría perderlo? Maldita sea, estoy envejeciendo
Para su información, si no quiere arriesgarse a sobrescribir sus estilos CSS programando "overflow: auto" en la devolución de llamada, simplemente use .css('overflow', ''). Pasar una cadena vacía generalmente elimina esa propiedad del estilo del elemento por completo. No estoy seguro si esto es un comportamiento documentado, pero es un truco muy útil.
Ward DS
2
No creo que admita animaciones CSS.
Gqqnbig
5

Alternativamente, para probar si algo no está animado, simplemente puede agregar un "!":

if (!$(element).is(':animated')) {...}
Tim
fuente
Esto no es muy cierto ... Lo contrario de jquery 'is' not 'not'. 'not' elimina los elementos filtrados del objeto jquery. Si desea verificar si hay objetos no animados, lo haceif (!$(element).is(':animated')) {...}
amosmos
1
@amosmos La respuesta fue editada y aprobada por la comunidad. Lo he revertido a donde era correcto.
Bill
2
Genial, solo que ahora es un duplicado de la respuesta aceptada. Por cierto, ¿qué significa aprobado por la comunidad?
amosmos
@amosmos stop trolling
Eric Cicero
1

si está usando cssanimación y asigna la animación usando específico class name, entonces puede verificarlo así:

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

¡Pero asegúrese de que está eliminando el nombre de la clase que está manejando la animación, una vez finalizada la animación!

Este código se puede usar para eliminar class namedespués de que finalice la animación:

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});
Ari
fuente
OP está usando jQuery animaiton.
Michał Perłakowski
simplemente sugiriendo una alternativa. ¿Y te refieres a la animación?
Ari
Sí, me refiero a la animación. En mi opinión, su respuesta está completamente fuera de tema.
Michał Perłakowski
0
$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});
anand vishwakarma
fuente
Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre cómo y / o por qué resuelve el problema mejoraría el valor de la respuesta a largo plazo. Lea este manual de instrucciones para brindar una respuesta de calidad.
thewaywewere