如果一个元素正在被动画，我如何用 jQuery 找出？

Posted 2023-02-18

【中文标题】如果一个元素正在被动画，我如何用 jQuery 找出？

【英文标题】：How do I find out with jQuery if an element is being animated?

【发布时间】：2010-10-18 00:24:14

【问题描述】：

我正在尝试移动页面上的一些元素，并且在动画发生期间，我希望将“溢出：隐藏”应用于元素，并在动画完成后将“溢出”返回为“自动”完成。

我知道 jQuery 有一个实用函数可以确定某些元素是否正在动画，但我在文档中的任何地方都找不到它

【参考方案1】：

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', '')。传递一个空字符串通常会从元素的样式中完全删除该属性。不确定这是否是记录在案的行为，但这是一个非常有用的技巧。

我认为它不支持 CSS 动画。

【参考方案2】：

或者，要测试是否有动画，您可以简单地添加一个“！”：

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

【讨论】：

这不是真的...... jquery 'is' 的反义词不是 'not'。 'not' 从 jquery 对象中删除过滤的元素。如果您想检查不是动画对象，请执行if (!$(element).is(':animated')) ...

@amosmos 答案已经过编辑并获得社区批准。我已将其回滚到正确的位置。

@amosmos 停止拖钓

【参考方案3】：

如果您正在使用css 动画并使用特定的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 动画。

只是建议一个替代方案。你是说动画吗？

是的，我指的是动画。 IMO 你的回答完全是题外话。

【参考方案4】：

如果你想对动画元素应用css，可以使用:animated伪选择器，像这样操作，

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

来源：https://learn.jquery.com/using-jquery-core/selecting-elements/

【参考方案5】：

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

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。请阅读此how-to-answer 以提供高质量的答案。