Question

好的，我必须在这里错过一些愚蠢的东西，但我迷失了为什么这不会起作用

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

任何帮助都会很棒！

Answer 1

您的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");
});

Answer 2

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

只需使用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

悬停切换时的jQuery Animate高度

2 个答案: