如何在jQuery中反转高度动画方向？

Question

我有2个div，如下所示；

<div id="diva">diva</div>
<div id="divb">divb</div>

像

div{
    display: block;
    overflow: hidden;
}
#diva{
    background-color: gray;
    width: 200px;
    height: 200px;
}
#divb{
    background-color: blue;
    width: 200px;
    height: 0px;
    margin-top: -40px;
}

默认情况下，第2格的高度为0，但在鼠标进入第一个div时会扩展。 JavaScript是;

$("#diva").mouseenter(function(){
    $("#divb").animate({ height: "40px" });
}).mouseleave(function(){
    $("#divb").animate({ height: "0px" });
});

一切工作正常。 但是我想反转第二格的高度动画方向。 现在，在当前状态下，当鼠标进入第一个div时，第二个div从顶部滚动到底部，而当鼠标离开时，第二个div从底部滚动到顶部。 但我想扭转这种情况。 我希望div在鼠标进入时从底部扩展到顶部，并在鼠标离开时从顶部扩展到底部。

我怎样才能做到这一点？ 这是工作中的小提琴。

Answer 1

通过将divb嵌套在diva ，使diva位置relative且使divb位置absolute ，并将其放在底部，我已经达到了想要的效果。 小提琴： http : //jsfiddle.net/Jcrbm/
CSS：

div{
    display: block;
    overflow: hidden;
}
#diva{
    background-color: gray;
    width: 200px;
    height: 200px;
}
#diva{
    background-color: gray;
    width: 200px;
    height: 200px;
    position:relative;
}
#divb{
    background-color: blue;
    width: 200px;
    height: 0px;
    position:absolute;
    bottom:0px;
}

HTML：

<div id="diva">diva
    <div id="divb">divb</div>
</div>

Answer 2

如果您不想修改HTML，则可以通过同时用height margin-top动画来实现：

$("#diva").mouseenter(function () {
    $("#divb").animate({
        height: "40px",
        marginTop: -40
    });
}).mouseleave(function () {
    $("#divb").animate({
        height: "0px",
        marginTop: 0
    });
});

http://jsfiddle.net/a9vpS/3/