Question

我有一个砖石墙，墙上有2条左右移动的箭头。

这是我的下面的代码：

$next.click(function() {
  $car.scrollTo($('.next-target'), 1000, {
    easing: 'easeOutCubic', 
    axis: 'x'
  });
  return false;
});

$prev.click(function() {
  $car.scrollTo($('.prev-target').last(), 1000, {
    easing: 'easeOutCubic', 
    axis: 'x'
  });
  return false;
});

当前动画有效，但是如果快速单击两次，动画将滞后并且仅执行一次。

我应该更改些什么，以便即使您没有完成动画，单击两次时它也会移动两次？

Answer 1

您需要检查动画是否处于活动状态。因此，我所做的就是让Var作为布尔值来检查动画是否处于活动状态，然后在500毫秒后重新进行动画处理。

   var isAnimating = false;
    $next.click(function() {
     if(!isAnimating){
       isAnimating = true;
       $car.scrollTo($('.next-target'), 0, {
         easing: 'easeOutCubic', 
         axis: 'x'
       });
     }
    setTimeout(function(){ isAnimating = false; }, 500);
    });

    $prev.click(function() {
      $car.scrollTo($('.prev-target').last(), 0, {
     if(!isAnimating){
       isAnimating = true;
        easing: 'easeOutCubic', 
        axis: 'x'
      });
     }
    setTimeout(function(){ isAnimating = false; }, 500);
    });

修复动画滞后和等待时间

1 个答案: