javascript - setTimer 不适用于 Jquery 悬停

Question

我正在尝试使用 Jquery 悬停对菜单进行简单的效果。 这是我的 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>

这里是jsfiddle .

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

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

Answer 1

您需要在本地定义变量elemin和elemout

<强> Demo

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