在鼠标悬停时停止连续动画

Question

希望快速提问/回答。 我在元素上设置了几个动画，它们都做了几乎相同的事情，但对于不同的类。但是，当我快速滑动鼠标并快速滑动时，动画会“bug”并播放另一个“帧”（即从头至尾再次播放动画，即使只有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")