javascript - 開いているときの JQuery Flyup 効果

Question

次のリンクにあるようなホバー時のブロックのフライアップを作成しようとしています...

http://p2power.com/

スライドショーのすぐ下... jqueryを使用して正確な効果を作成するにはどうすればよいですか?

Answer 1

これは非常に基本的な例です。これはすべて CSS3 で行うことができますが、ここでは jQuery の方法を使用します。

HTML:

<div class="box">
    <div class="inner">
        <p>Content</p>
    </div>
</div>

CSS:

.box {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 0;
    overflow: hidden;
}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

jQuery:

$('.box').hover(function(){
    $(this).animate({
        height: 200
    });
},function(){
    $(this).animate({
        height: 0
    });        
});

ここでコードをテストできます。

それはそれを行う必要があります！

それが役立つことを願っています:)