うまくいけば、簡単な質問/回答です。私は要素にいくつかのアニメーションを設定していますが、すべてほとんど同じことをしていますが、クラスは異なります。ただし、mouseenter と mouseleave を非常にすばやく実行すると、アニメーションが「バグ」になり、別の「フレーム」が再生されます (たとえば、マウスを動かしているインスタンスが 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);
});
});