마우스 오버시 연속 애니메이션 중지

Question

빠른 질문/답변. 몇 가지 애니메이션은 요소에서 모두 똑같은 일을하지만 다른 클래스에 설정되어 있습니다. 그러나 마우스를 아주 빠르게 움직이고 마우스를 떼면 애니메이션이 "버그"를 일으켜 또 다른 "프레임"을 재생합니다 (즉, 예를 들어, 마우스가 움직이는 3 가지 인스턴스 만 있어도 처음부터 끝까지 애니메이션을 재생합니다. 객체 안팎으로).

누군가가 커서를 객체를 떠난 후에도 계속 발생하지 않도록 애니메이션을 지우는 등의 작업을 중단시킬 수있는 방법에 대한 해결책이 있습니까?

$(document).ready(function(){ 
$("div.project").mouseenter(function(){ 
$(this).find("img").animate({width:'120%',height:'120%', left:'-20px',top:'-20px'},100) 
$(this).find(".overlay-project1").animate({opacity: 0.9},"fast") 
$(this).find(".overlay-project2").animate({opacity: 0.95},"fast") 
$(this).find(".overlay-project3").animate({opacity: 0.95},"fast") 
mouseenter.stop(true,true); 
}); 
$("div.project").mouseleave(function(){ 
$(this).find("img").animate({width:'100%',height:'100%', left:'0px', top:'0px'},"fast") 
$(this).find(".featured").animate({opacity:1},200) 
$(this).find(".overlay-project1").animate({opacity: 0},"fast") 
$(this).find(".overlay-project2").animate({opacity: 0},"fast") 
$(this).find(".overlay-project3").animate({opacity: 0},"fast") 
mouseleave.stop(true,true); 
}); 

}); 

Answer 1

사용 .stop()

$(this).find(".overlay-project1").stop().animate({opacity: 0},"fast")