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

すべてが正常に機能しています。しかし、私は2番目のdivの高さアニメーション方向を逆にしたいです。現在、現在の状態では、マウスが最初のdivに入ると2番目のdivが上から下にスクロールし、マウスが離れると下から上にスクロールして戻ります。しかし、私はこれを逆にしたい。マウスが入ったときにdivを下から上に拡大し、マウスが離れたときに上から下に縮小したい。

これどうやってするの？これが作業中のフィドルです。

4

2 に答える 2

1

入れ子divbにして、位置と位置divaを作り、それを一番下に置くことで、あなたが望む効果を実現しました。フィドル： http： //jsfiddle.net/Jcrbm/ CSS：divarelativedivbabsolute 

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 に答える