javascript - 如何防止多次播放动画 - Jquery

Question

当快速按下一个按钮来触发带有动画的功能时，我们通常会多次调用该功能，并且动画会播放一次。

如果您不希望在动画仍在播放时触发该函数，该怎么办？

这是一个告诉 child 跳跃的函数的简单示例:

$('button').click(jumpKid);

function jumpKid () { 
 $kid
  .animate({'margin-bottom' : '+=' + 100} , 500)
  .animate({'margin-bottom' : '-=' + 100} , 500)
};

快速按下按钮会让 child 跳很多次。

我正在寻找 jquery/js 解决方案(而不是使用诸如“isKidJumping”之类的 var)

Answer 1

您可以使用:animated选择器，.is()

$("button").click(jumpKid);

function jumpKid () { 
 if (!$kid.is(":animated")) {
   $kid
   .animate({'margin-bottom' : '+=' + 100} , 500)
   .animate({'margin-bottom' : '-=' + 100} , 500)
 }
};