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.
Respuestas:
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');
};.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.
Alternativamente, para probar si algo no está animado, simplemente puede agregar un "!":
if (!$(element).is(':animated')) {...}if (!$(element).is(':animated')) {...}
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");
});Si desea aplicar css a elementos animados, puede usar el :animatedpseudo selector y hacerlo así,
$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');fuente: https://learn.jquery.com/using-jquery-core/selecting-elements/
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});