防止.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);
      });

    });