Estou tentando mover alguns elementos na página e, durante o tempo em que a animação ocorre, quero ter "overflow: hidden" aplicado a um elemento e "overflow" de volta para "auto" quando a animação for concluída.
Eu sei que o jQuery tem uma função de utilidade que determina se algum elemento está sendo animado, mas não consigo encontrá-lo em nenhum lugar na documentação
Respostas:
if( $(elem).is(':animated') ) {...}Mais informações : https://api.jquery.com/animated-selector/
Ou:
$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};.css('overflow', ''). Passar uma string vazia geralmente remove essa propriedade completamente do estilo do elemento. Não tenho certeza se esse é um comportamento documentado, mas é um truque muito útil.
Como alternativa, para testar se algo não está animado, você pode simplesmente adicionar um "!":
if (!$(element).is(':animated')) {...}if (!$(element).is(':animated')) {...}
se estiver usando cssanimação e atribuir a animação usando específico class name, você pode verificá-la assim:
if($("#elem").hasClass("your_animation_class_name")) {}Mas certifique-se de que está removendo o nome da classe que está manipulando a animação, depois que a animação terminar!
Este código pode ser usado para remover o class nameapós o término da animação:
$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){
$(this).removeClass("your_animation_class_name");
});Se você quiser aplicar css a elementos animados, você pode usar o :animatedpseudo seletor e fazer assim,
$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');fonte: https://learn.jquery.com/using-jquery-core/selecting-elements/
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});