1

我有 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 从下到上滚动。但我想扭转这一点。我希望 div 在鼠标进入时从下到上展开，并希望在鼠标离开时从上到下缩小。

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

4

2 回答 2

1

通过嵌套divbin diva，制作divapositionrelative和divbpositionabsolute并放在底部，就达到了你想要的效果。小提琴： 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>
于 2013-03-25T20:56:20.177 回答
0

如果您不想修改 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/

于 2013-03-25T21:03:50.650 回答