Como faço para saber com jQuery se um elemento está sendo animado?

101

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

javascript jquery animation
fonte

Respostas:

199 
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');
    };
James
fonte
sim era isso, obrigado. como eu poderia perder isso? caramba, estou ficando velho
Para sua informação, se você não quer arriscar sobrescrever seus estilos CSS programando "overflow: auto" no callback, simplesmente use .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.
Ward DS
2
Não acho que suporte animações CSS.
Gqqnbig
5

Como alternativa, para testar se algo não está animado, você pode simplesmente adicionar um "!":

if (!$(element).is(':animated')) {...}
Tim
fonte
Isso não é verdade ... O oposto de jquery 'é' não é 'não'. 'not' remove os elementos filtrados do objeto jquery. Se você quiser verificar se há objetos não animados, façaif (!$(element).is(':animated')) {...}
amosmos
1
@amosmos A resposta foi editada e a comunidade aprovada. Rolei para onde estava correta.
Bill
2
Ótimo, só que agora é uma duplicata da resposta aceita. BTW, o que significa aprovado pela comunidade?
amosmos
@amosmos stop trolling
Eric Cicero
1

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");
});
Ari
fonte
OP está usando animação jQuery.
Michał Perłakowski
apenas sugerindo uma alternativa. E você quis dizer animação?
Ari
Sim, eu quis dizer animação. IMO, sua resposta está completamente fora do assunto.
Michał Perłakowski
0 
$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});
anand vishwakarma
fonte
Embora este código possa responder à pergunta, fornecer contexto adicional sobre como e / ou por que ele resolve o problema melhoraria o valor da resposta a longo prazo. Leia estas instruções para fornecer uma resposta de qualidade.
thewaywere