如何使用 jQuery 确定元素是否正在动画？

Question

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

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

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');
    };

Answer 2

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

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

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

Answer 4

如果你想将 css 应用到动画元素，你可以使用:animated伪选择器并像这样做，

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

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

Answer 5

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

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