Javascript setTimer不适用于Jquery悬停

我试图用Jquery hover对菜单做出简单的效果。 以下是我的Javascript：

$(".goodi").hover(function () {    // make width 50px on mousenter
     elemin = this;
     $(elemin).animate({
         "height": "50px"
     }, 1000);
 }, function () {
     elemout = this;
     setTimeout(function () {  //  restore width to 100px in 1 second after mouseleave
         $(elemout).animate({
             "height": "100px"
         }, 1000);
     }, 1000);
 });

以下是仅用于演示的html和CSS：

.goodi {
background:lightgrey;
width: 100px;
height:100px;
float:left;
margin:10px;    }

<div class="goodi"></div>
<div class="goodi"></div>
<div class="goodi"></div>

.goodi{
背景：浅灰色；
宽度：100px；
高度：100px；
浮动：左；
边距：10px；}

这是

我遇到的问题，花了一整天的时间试图解决它：当我在所有的.goodi div上悬停足够快时，它们会改变高度，但只有最后一个悬停将其恢复到100px。setTimeout必须对每个悬停的div起作用，但它不会

---

有什么想法吗？非常感谢。

您需要在本地定义变量

elemin

和

elemout

 $(".goodi").hover(function () {
   var  elemin = this;
     $(elemin).animate({
         "height": "50px"
     }, 1000);
 }, function () {
    var elemout = this;
     setTimeout(function () {
         $(elemout).animate({
             "height": "100px"
         }, 1000);
     }, 1000);
 });

---

您需要在本地定义变量

elemin

和

elemout

 $(".goodi").hover(function () {
   var  elemin = this;
     $(elemin).animate({
         "height": "50px"
     }, 1000);
 }, function () {
    var elemout = this;
     setTimeout(function () {
         $(elemout).animate({
             "height": "100px"
         }, 1000);
     }, 1000);
 });

---

此外，如果用户非常高兴，您不希望每次都触发输出动画

---

此外，如果用户非常高兴，您不希望每次都触发输出动画

---

Boris，从我的答案中编辑

.stop（）

s，那么这是最好的答案。你也需要一些小的修正。（1）

var定时器就足够了。（2） 
clearTimeout（timer）
在没有测试的情况下是安全的。（3） 
clearTimeout（timer）
在设置新超时之前，还需要在mousleave处理程序中执行。覆盖
计时器
不会取消已挂起的超时。@Roamer-1888，感谢您的额外编辑。我习惯于编写偏执狂代码，这就是我编写默认值（1）和检查（2）的原因。对于（3）我更喜欢将
clearTimeout
放在开头。因为如果用户对元素发疯，它将阻止鼠标新进入时退出动画（如果新进入动画发生在旧退出动画之前）Boris，在大多数情况下，您可以在mouseleave处理程序中不使用
clearTimeout
，因为mouseenter将先于mouseout。但是如果
mouseleave
是由javascript触发的呢？我犯了一个错误，在非常相似的代码中没有执行
clearTimeout
，然后花了很长时间才发现我的错误。Boris，在我的答案中编辑
.stop（）
s，那么这是最好的答案。你也需要一些小的修复。（1） 
var定时器就足够了。（2） 
clearTimeout（timer）
在没有测试的情况下是安全的。（3） 
clearTimeout（timer）
在设置新超时之前，还需要在mousleave处理程序中执行。覆盖
计时器
不会取消已挂起的超时。@Roamer-1888，感谢您的额外编辑。我习惯于编写偏执狂代码，这就是我编写默认值（1）和检查（2）的原因。对于（3）我更喜欢将
clearTimeout
放在开头。因为如果用户对元素发疯，它将阻止鼠标新进入时退出动画（如果新进入动画发生在旧退出动画之前）Boris，在大多数情况下，您可以在mouseleave处理程序中不使用
clearTimeout
，因为mouseenter将先于mouseout。但是如果
mouseleave
是由javascript触发的呢？我犯了一个错误，在非常相似的代码中没有执行
clearTimeout
，然后花了很长时间才发现我的错误。