如何使用jQuery找出元素是否处于动画状态?


101

我正在尝试移动页面上的某些元素,并且在动画发生时,我希望将“ overflow:hidden”应用于元素,并在动画完成后将“ overflow”变回“ auto”。

我知道jQuery有一个实用程序功能,该功能确定某个元素是否处于动画状态,但是我无法在文档中的任何位置找到它

Answers:


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

更多信息https : //api.jquery.com/animated-selector/


要么:

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

是的,就是这样,谢谢。我怎么会错过呢?该死,我要老了

仅供参考,如果您不想冒通过在回调中编写“ overflow:auto”来覆盖CSS样式的风险,只需使用即可.css('overflow', '')。传递空字符串通常会从元素的样式中完全删除该属性。不知道这是否是记录在案的行为,但这是一个非常有用的技巧。
Ward DS

2
我认为它不支持CSS动画。
Gqqnbig

5

另外,要测试某些东西是否没有动画效果,您可以简单地添加“!”:

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

这不是真的。jquery'is'的反义词不是'not'。'not'从jquery对象中删除过滤的元素。如果您想检查是否没有动画对象,可以这样做if (!$(element).is(':animated')) {...}
amosmos

1
@amosmos答案已被编辑并获得社区批准。.我已将其退回到正确的位置。
比尔

2
太好了,直到现在才是已接受答案的副本。顺便说一句,社区认可是什么意思?
amosmos

@amosmos停止拖钓
埃里克·西塞罗

1

如果您使用的是css动画,并使用specific指定了动画class name,则可以像这样检查它:

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

但是,请确保在动画完成后删除要处理动画的类名!

该代码可用于class name在动画结束后删除:

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

OP正在使用jQuery animaiton。
米哈尔Perłakowski

只是建议一个替代方案。那是动画吗?
阿里

是的,我的意思是动画。海事组织,你的答案完全是题外话。
米哈尔Perłakowski


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

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

尽管此代码可以回答问题,但提供有关如何和/或为什么解决问题的其他上下文将提高​​答案的长期价值。请阅读此操作指南以提供优质的答案。
thewaywere是
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.