Javascript jQuery悬停时设置高度动画切换

好吧，我一定错过了一些愚蠢的事情，但我不明白为什么这不起作用

    $('#fleet').hover(function(){
        var fleet = '2';
        $("#fleetHover").show();
        $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
    }, function(){
        $("#fleetHover").hide();
          $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
    });

当我悬停元素时，它会扩展我需要的高度。但当我把鼠标放出来时，它就不会再回来了

但如果我把高度作为一个值而不是一个变量来做这件事，它就会起作用

    $('#fleet').hover(function(){
        var fleet = '2';
        $("#fleetHover").show();
        $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
    }, function(){
        $("#fleetHover").hide();
          $("#fleet").animate({ "height": "-=60px" }, "slow");
    });

我错过了什么？我正在慢慢学习JS/jQuery的东西，一个变量不能被多次使用吗

---

任何帮助都会很好

您的

fleet

变量是在第一个匿名函数中定义的，其作用域是第一个匿名函数。第二个匿名函数无法访问它。一种解决方案是在两个函数之外定义变量：

var fleet = '2';
$('#fleet').hover(function(){        
    $("#fleetHover").show();
    $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
}, function(){
    $("#fleetHover").hide();
    $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
});

---

您的

fleet

变量是在第一个匿名函数内部定义的，其作用域是第一个匿名函数。第二个匿名函数无法访问它。一种解决方案是在两个函数之外定义变量：

var fleet = '2';
$('#fleet').hover(function(){        
    $("#fleetHover").show();
    $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
}, function(){
    $("#fleetHover").hide();
    $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
});

---

如果您不想要此选项，我将删除此答案。

只需将CSS3动画与CSS悬停状态一起使用即可

.grow {
  height: 140px;
  width: 40px;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 100px;
  background: mediumSeaGreen;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.grow:hover {
  height: 200px;
}

---

如果您不想要此选项，我将删除此答案。

只需将CSS3动画与CSS悬停状态一起使用即可

.grow {
  height: 140px;
  width: 40px;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 100px;
  background: mediumSeaGreen;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.grow:hover {
  height: 200px;
}

---

我是个白痴。。。我所知道的jQuery小东西就是其中之一，感谢你指出我过去看得很清楚的东西，现在效果很好！我建议将其转换为一个函数，或者通过脚本文件可以使用该变量。参考我做的编辑。我是个白痴。。。我所知道的jQuery小东西就是其中之一，感谢你指出我过去看得很清楚的东西，现在效果很好！我建议将其转换为一个函数，或者通过脚本文件可以使用该变量。请参阅我所做的编辑。相信我，我很想使用CSS来实现这一点，但我需要从Java应用程序的高度向我传递一个变量，我不知道从哪里开始获取Java对象并将其放入我理解的CSSAhh！我很高兴听到你找到了答案，祝你好运，朋友，如果你想让我删除我的答案，请随时告诉我。对我来说没关系，我喜欢你跳出框框思考。CSS是我在JS之前要做的：）是的，我是一个CSS迷，喜欢它现在提供的东西。如果IE已经放弃的话，那么美国的开发者们就要准备好了！相信我，我很想使用CSS来实现这一点，但是我需要从Java应用程序的高度向我传递一个变量，我不知道从哪里开始获取Java对象并将其放入我理解的CSSAhh中！我很高兴听到你找到了答案，祝你好运，朋友，如果你想让我删除我的答案，请随时告诉我。对我来说没关系，我喜欢你跳出框框思考。CSS是我在JS之前要做的：）是的，我是一个CSS迷，喜欢它现在提供的东西。如果IE已经放弃的话，那么美国的开发者们就要准备好了！