如何使用jQuery判断一个元素是否正在进行动画？

Question

我想移动页面上的一些元素，同时在动画进行期间，我想对一个元素应用"overflow:hidden"，并在动画完成后将"overflow"恢复为"auto"。

我知道jQuery有一个实用函数可以确定某个元素是否正在被动画化，但我无法在文档中找到它的任何信息。

- Radu

Answer 1

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

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

---

或者：

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

- James

---

是的，就是这样了，谢谢。我怎么会错过它呢？该死，我老了。 - Radu

如果您不想通过在回调函数中编程“overflow: auto”来冒险覆盖CSS样式，只需使用.css('overflow', '')。传递空字符串通常会从元素的样式中完全删除该属性。不确定这是否是记录的行为，但这是一个非常有用的技巧。 - Ward D.S.

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

Answer 2

另外，要测试某个元素是否未进行动画，您可以简单地添加一个“！”：

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

- Tim

---

这是非常不正确的... jQuery的'is'的相反操作不是'not'。 'not'从jQuery对象中移除筛选元素。 如果你想检查未被动画化的对象，可以使用if (!$(element).is(':animated')) {...}。 - amosmos

@amosmos 这个答案已经被编辑并由社区批准。我已将其恢复到正确的状态。 - Bill

@amosmos 停止恶意攻击。 - Eric Cicero

Answer 3

如果您正在使用 CSS 动画，并通过特定的 class name 分配动画，则可以像这样检查：

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

但一定要确保在动画结束后移除处理动画的class名称！

可以使用以下代码在动画完成后移除class名称：

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

- Ari

---

OP正在使用jQuery动画。 - Michał Perłakowski

只是提供一个替代方案。你是指动画吗？ - Ari

是的，我指的是动画。在我看来，你的回答完全离题了。 - Michał Perłakowski

Answer 4

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

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

- anand vishwakarma

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。请阅读此如何回答以提供高质量的答案。 - thewaywewere

Answer 5

如果您想将CSS应用于动画元素，可以使用:animated伪选择器，并像这样操作：

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

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

- Lucky