Задержка анимации при при наведенном hover

Добрый день. Нужно сделать анимацию, что бы при наведении на блок поднималась нижняя полоска заливая его фоном. НО: что бы она не опускалась до того момента, как мышка уйдет за пределы блока.

jsfiddle.net

html

<div class="box">
<div class="box-line"></div>
</div>

css

.box {
width:300px;
height: 170px;
border:1px solid black;
position:relative;
}
.box-line {
height: 50px;
width: 100%;
background-color: silver;
position: absolute;
bottom:0;
}

jquery

$(".box").hover(function() {
    $(".box-line").animate({height: "100%"}, 500, function() {
        $(".box-line").animate({height: "50px"})
    });
});