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

【问题标题】：Stopping Continuous Animation on Mouseover在鼠标悬停时停止连续动画
【发布时间】：2013-07-30 13:03:21
【问题描述】：

希望是一个快速的问题/答案。我在元素上设置了一些动画，它们几乎都做同样的事情，但针对不同的类。但是，当我很快地 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);
});

});

【问题讨论】：

标签： jquery mouseover mouseenter

【解决方案1】：

使用.stop()

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

【讨论】：

太棒了！非常感谢。我一直在寻找有关 .stop() 的 cmets，但我仍在学习语法，所以不确定它需要去哪里:)