防止.mouseover在2秒之前重置动画

Question

我有精灵动画，可以悬停动画，即使我鼠标移动也能保持动画效果。如果我在动画完成之前将鼠标悬停在图标上，则会重置动画。

动画设置为2秒。有没有办法将鼠标悬停在动画上，只有在我鼠标悬停2秒后重置它？

$(".book").on('mouseenter',function(){
$(this).toggleClass('sprite_animating');
});


$(".book").on('animationend', function(){
$(this).toggleClass('sprite_animating');
});

Answer 1

您可以设置超时条件，并且每次鼠标悬停时，您都会在响应鼠标悬停之前先检查该条件。下面的代码段应该有用。

$(document).ready(function(){

       var mouseoverDisabled = false;
       $('.book').mouseover(function(){
          if (mouseoverDisabled)
             return;
          $(this).toggleClass('sprite_animating');
          mouseoverDisabled = true;
          setTimeout(function(){mouseoverDisabled = false;}, 2000);
      });

    });