Verhindere das Zurücksetzen der Animation vor 2 Sekunden

Question

Ich habe Sprite-Animationen, die beim Hover animieren und animieren, auch wenn ich mouseout. Wenn ich den Mauszeiger über das Symbol halte, bevor die Animation abgeschlossen ist, wird die Animation zurückgesetzt.

Die Animationen sind auf 2 Sekunden eingestellt. Gibt es eine Möglichkeit, den Mauszeiger über die Animation zu bewegen und sie erst nach 2 Sekunden zurückzusetzen, nachdem ich sie per Mausklick verschoben habe?

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


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

Answer 1

können Sie eine Bedingung mit einem Timeout gesetzt und jeder Zeit gibt es ein Mouseover Sie für diesen Zustand auf die Mouseover vor dem Antworten zuerst überprüfen. Das folgende Snippet sollte funktionieren.

$(document).ready(function(){ 

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

    });