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

Div 2默认为0高度，但是当鼠标进入第一个div时会扩展。 JavaScript是;

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

一切都运转正常。但是我想要反转第二个div的高度动画方向。现在，在当前条件下，当鼠标进入第一个div时，第二个div从上到下滚动，当鼠标离开时，从底部向上滚动。但我想扭转这种局面。我希望当鼠标进入时div会从下到上扩展，并且当鼠标离开时我想从上到下收缩。

我该怎么做？ Here 是工作小提琴。

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，可以通过margin-top同时设置height动画来实现此目的：

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

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

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

2 个答案: