如何使用 jQuery 查找元素是否是动画元素?

我试图移动页面上的一些元素,在动画发生的时候,我想有“溢出: 隐藏”应用到一个元素,和“溢出”回到“自动”一旦动画完成。

我知道 jQuery 有一个实用函数,它可以确定某个元素是否被动画化,但是我在文档中找不到它

83263 次浏览
if( $(elem).is(':animated') ) {...}

More info: https://api.jquery.com/animated-selector/


Or:

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

Alternatively, to test if something is not animated, you can simply add a "!":

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

if you are using css animation and assign the animation by using specific class name, then you can check it like this:

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

But make sure that you are removing the class namewhich is handling the animation, after the animation is finished!

This code can be used to remove the class name after the animation is finished:

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

If you want to apply css to animated elements, you can use the :animated pseudo selector and do it like this,

$("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);
});