Prevent .mouseover from resetting animation before 2 seconds

Question

I have sprite animations that animate on hover, and keep animating even when I mouseout. If I hover over the icon before the animation is complete, it resets the animation.

The animations are set at 2 seconds. Is there a way to hover over the animation and only have it reset after 2 seconds have passed since I mouseover'd it?

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


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

Possible duplicate of http://stackoverflow.com/questions/39585353/how-do-i-rotate-an-image-on-hover-using-jquery/ — guest271314, Sep 21 '16 at 00:34
`javascript` at Question should return expected result http://stackoverflow.com/a/39586079/. Can you include `css` at Question? Can you create a stacksnippets or jsfiddle http://jsfiddle.net to demonstrate issue? — guest271314, Sep 21 '16 at 05:42

score 0 · Answer 1 · answered Sep 21 '16 at 04:42

You can set a condition with a timeout and every-time there's a mouseover you check for that condition first before responding to the mouseover. The snippet below should work.

$(document).ready(function(){

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

    });

Prevent .mouseover from resetting animation before 2 seconds

1 Answers1