Question

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

如果您不想在动画播放时触发该功能，该怎么办？

这是一个告诉孩子跳跃的函数的简单示例：

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

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

快速按下按钮会导致孩子跳多次。

我正在寻找一个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)
 }
};

Answer 2

您可以使用jQuery .one()方法：

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

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

Answer 3

你可以用很短的间隔检查：

setInterval(function() {
   $("button").click(jumpKid);
},100);

或只是在跳跃的课程之间切换：

$("button").click(function() {
   kid.removeClass("jumped"));
}
if(!kid.hasClass("jumped")) jumpKid();

Answer 4

您可以在播放动画时分离事件侦听器，并作为最后一次.animate（）方法调用的回调，重新附加它：

var $button = $('button');
$button.on('click', jumpKid);

function jumpKid () {

 $button.off('click', jumpKid);
 $kid
  .animate({'margin-bottom' : '+=' + 100} , 500)
  .animate({'margin-bottom' : '-=' + 100} , 500, function(){
      // In a callback function for the last .animate() call, we'll re-attach the event listener:
      $button.on('click', jumpKid);
  });
};

Answer 5

感谢所有答案。我还找到了一个非常简单易用的解决方案：

$('button').click(function(){
  if ($kid.queue().length === 0 ){
    jumpKid();
  }
});


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

$ kid.queue（）将返回一个存储对象动画的数组，因此$ kid.queue（）。length将向我们显示存储的动画数量。

例如：当你使用“$ kid.animate ...”时，$ kid.queue（）。length将返回1.

所以，我们可以使用$ kid.queue（）。length来阻止jumpKid函数被触发！万岁！

如何防止再播放一次动画 - Jquery

5 个答案: