javascript - 悬停切换时的 jQuery Animate 高度

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