Comment savoir avec jQuery si un élément est en cours d'animation?

101

J'essaye de déplacer certains éléments sur la page, et pendant le temps que l'animation se produit, je veux avoir "débordement: caché" appliqué à un élément, et "débordement" de retour sur "auto" une fois l'animation terminée.

Je sais que jQuery a une fonction utilitaire qui détermine si un élément est en cours d'animation mais je ne le trouve nulle part dans la documentation

javascript jquery animation

199

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

Plus d'infos : https://api.jquery.com/animated-selector/

Ou:

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

— James
source

oui c'était ça, merci. comment pourrais-je le rater? putain, je vieillis

Pour info, si vous ne voulez pas risquer d'écraser vos styles CSS en programmant "overflow: auto" dans le callback, utilisez simplement .css('overflow', ''). Passer une chaîne vide supprime généralement cette propriété du style de l'élément. Je ne sais pas s'il s'agit d'un comportement documenté, mais c'est une astuce très utile.

— Ward DS

2

Je ne pense pas qu'il prend en charge les animations CSS.

— Gqqnbig

5

Alternativement, pour tester si quelque chose n'est pas animé, vous pouvez simplement ajouter un "!":

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

— Tim
source

Ce n'est pas du tout vrai ... Le contraire de jquery «est» n'est pas «pas». 'not' supprime les éléments filtrés de l'objet jquery. Si vous voulez vérifier les objets non animés que vous faitesif (!$(element).is(':animated')) {...}

— amosmos

1

@amosmos La réponse a été modifiée et approuvée par la communauté. Je l'ai restaurée là où elle était correcte.

— Bill

2

Génial, c'est seulement maintenant un double de la réponse acceptée. BTW qu'est-ce que cela signifie approuvé par la communauté?

— amosmos

@amosmos stop trolling

— Eric Cicero

1

si vous utilisez une cssanimation et assignez l'animation en utilisant spécifique class name, vous pouvez le vérifier comme ceci:

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

Mais assurez-vous que vous supprimez le nom de la classe qui gère l'animation, une fois l'animation terminée!

Ce code peut être utilisé pour supprimer le class nameaprès la fin de l'animation:

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

— Ari
source

OP utilise l'animaiton jQuery.

— Michał Perłakowski

suggérant juste une alternative. Et vouliez-vous dire l'animation?

— Ari

Oui, je parlais d'animation. OMI votre réponse est complètement hors sujet.

— Michał Perłakowski

0

Si vous souhaitez appliquer css à des éléments animés, vous pouvez utiliser le :animatedpseudo-sélecteur et le faire comme ceci,

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

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

— Chanceux
source

0

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

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

— anand vishwakarma
source

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la façon et / ou pourquoi il résout le problème améliorerait la valeur à long terme de la réponse. Veuillez lire cette réponse pratique pour fournir une réponse de qualité.

— thewaywewere le