Comment savoir avec jQuery si un élément est animé ?

Question

J'essaie de déplacer certains éléments sur la page, et pendant la durée de l'animation, je veux que "overflow:hidden" soit appliqué à un élément, et que "overflow" redevienne "auto" une fois l'animation terminée.

Je sais que jQuery a une fonction utilitaire qui détermine si un élément est animé, mais je ne la trouve nulle part dans la documentation.

Answer 1

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

Plus d'informations : http://docs.jquery.com/Selectors/animated

---

Ou :

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

Answer 2

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

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

Answer 3

Si vous utilisez css et affecter l'animation en utilisant des class name alors 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 name après que l'animation soit terminée :

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

Answer 4

Si vous souhaitez appliquer du css à des éléments animés, vous pouvez utiliser la fonction :animated pseudo-sélecteur et faites-le comme ceci,

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

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

Answer 5

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

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