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);
 });

Answer 2

此外，如果用户非常满意，您不希望每次都触发OUT动画

Demo

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

setTimer不适用于Jquery悬停

2 个答案: