0

私はコンテンツを保持する#bannerを持っています。基本的に私がやりたいのは、一定量のコンテンツを表示し、クリックすると残りのコンテンツを表示するボタンを追加することです。これにより、＃bannerの高さもアニメーション化されます。＃bannerの高さを300pxに設定しましたが、コンテンツ#innerの高さを見つけて、それに応じてアニメーション化します。現在、私は次のバージョンを持っていますが、効果を達成するために多くの#ids /を使用していると考えていますが、これを改善する方法を誰かにアドバイスできますか？

ここでフィドル：http：//jsfiddle.net/43gTt/1/

ありがとうカイル

4

1 に答える 1

1

innerdivの高さを計算し、それを使用してアニメーション化することをお勧めします。

var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();

以下は、div のコンテンツに基づいて innerDiv の高さを計算します。

また、バナーの css スタイルを に更新して、バナーoverflow:hidden用に別のアニメーションを作成する必要がないようにしました。

デモ

CSS:

#banner{background:#dedede;overflow: hidden; }
#outer{margin:0 auto;width:200px;}
#middle{height:200px;overflow:hidden}
#inner{width:200px;margin:0 auto;}
.entry{display:none;}

JS:

$(document).ready(function() {

    var outer = $('#outer'),
        middle = $('#middle'),
        inner = $('#inner'),
        /*innerH = inner.height(),*/
        banner = $('#banner'),
        more = $('#more');

    var $tmpInner = inner.clone().appendTo('body');
    var divHeight = $tmpInner.outerHeight();
    $tmpInner.remove();    

    // animate banner and #middle to reveal additional content
    more.on('click', function(e) {
        middle.animate({
            height: divHeight
        }, 300);

        /*banner.animate({
            height: innerH
        }, 300);*/
    });
});

注:なぜそんなに多くのラッパー div が必要なのかはわかりませんが、それは HTML の一部になると思います。また、コードのクリーンアップはお任せします。

于 2012-04-25T22:30:52.100 に答える