悬停切换时的jQuery Animate高度

Question

Ok i must be missing something stupid here but i am lost to why this wont work

    $('#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");
    });

When i hover the element it expands the height that i need. But when i mouse out it doesnt go back.

But if i do this with the height as a value and not a variable it works.

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

What am i missing here? I am slowly learning the JS/jQuery stuff can a variable not be used more than once?

Any help would be great!

Answer 1

Your fleet variable is defined inside of and scoped to the first anonymous function. It isn't accessible to the second anonymous function. One solution would be to define the variable outside of both functions:

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

I will remove this answer if you don't want this option.

Just use CSS3 animation with CSS hover states.

.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