1

好的，我一定是在这里遗漏了一些愚蠢的东西，但我不知道为什么这行不通

    $('#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 的东西，一个变量不能多次使用吗？

任何帮助都会很棒！

4

2 回答 2

4

您的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");
});
于 2013-10-02T18:11:19.983 回答
1

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

只需使用带有 CSS 悬停状态的 CSS3 动画。

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

jsfiddle

于 2013-10-02T18:14:24.150 回答