¿Cómo puedo averiguar con jQuery si un elemento está siendo animado?

Question

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

Sé jQuery tiene una función de utilidad que determina si un elemento está siendo animado pero no puedo encontrar en cualquier lugar en la documentación

Answer 1

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

Más información: http://docs.jquery.com/Selectors/animated

---

O bien:

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

Answer 2

Alternativamente , Para probar si algo no está animado, sólo tiene que añadir un "!":

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

Answer 3

si está utilizando css animación y asigna la animación mediante el uso específico class name, a continuación, se puede comprobar de esta manera:

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

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

Este código se puede utilizar para eliminar el class name después de la animación está acabado:

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

Answer 4

Si desea aplicar CSS a los elementos animados, puede utilizar el selector de :animated seudo y hacerlo de esta manera,

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

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

Answer 5

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

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