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); 
     }); 

    });