Comment puis-je savoir avec jQuery si un élément est en cours d'animation?
J'essaie de déplacer certains éléments sur la page, et pendant le temps que l'animation se produit, je veux avoir" overflow:hidden "appliqué à un elemnt, et" overflow "revenir à" 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 le trouve nulle part dans les documents
5 réponses
if( $(elem).is(':animated') ) {...}
Plus d'infos: http://docs.jquery.com/Selectors/animated
Ou:
$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};
Sinon, pour tester si quelque chose n'est pas animé, vous pouvez simplement ajouter un "!":
if (!$(element).is(':animated')) {...}
Si vous voulez appliquer css aux éléments animés, vous pouvez utiliser le pseudo sélecteur :animated et le faire comme ceci,
$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');
Source : https://learn.jquery.com/using-jquery-core/selecting-elements/
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});
Si vous utilisez css animation et d'attribuer l'animation par l'utilisation de 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 classe qui gère l'animation, Une fois l'animation terminée!
Ce code peut être utilisé pour enlever les class name une fois l'animation terminée:
$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){
$(this).removeClass("your_animation_class_name");
});