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

How to reverse height animate direction in jQuery?

本文关键字：高度 动画 方向 jQuery      更新时间：2023-09-26

我有两个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时扩展。

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

一切正常。但是我想反转第二个div的高度动画方向。现在，在目前的情况下，当鼠标进入第一个div时，第二个div从上到下滚动，当鼠标离开时，第二个div从下到上滚动。但我想扭转这一局面。我希望div在鼠标进入时从下向上展开，并在鼠标离开时从上向下收缩。

我该怎么做?这里是工作小提琴

通过将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>

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

相关文章：