1

overflow:hidden高さを設定したdivがあります。を実行するanimate()と、高さがフルサイズでアニメーション化されます。

たとえば、私はこれを持っています：

http://jsfiddle.net/aW9k9/

<a href="#" onclick="lol(); return false;">clicky</a>

<div style="height:50px; overflow:hidden;" class="main">
    <div style="height:100px; background:blue;">text</div>
    <div style="height:50px; background:yellow;">text</div>
    <div style="height:50px; background:green;">text</div>
</div>

この例は機能しますが、それはすべての要素の高さの合計を知っていたからです。

<script>
    function lol() {
        $("div.main").animate({height:'200px'}, 1000);
    }
</script>

^アニメーションの高さの合計を知らずに、どうすればそれを再現できますか?

4

3 に答える 3

2

.outerHeight(true)内側の div のマージンを含めるために使用する @MattBall の回答の修正バージョン。

function lol() {
    var $main = $("div.main"),
        totalHeight = 0;

    $main.children().each(function () {
        totalHeight += $(this).outerHeight(true);
    });

    $main.animate({height:totalHeight}, 1000);
}​
于 2012-08-15T02:07:00.557 に答える
1

HTML コードの変更が問題にならない場合は、次のように HTML コードを変更するだけです。

<a href="#" onclick="lol(); return false;">clicky</a>

<div style="height:50px; overflow:hidden;" class="main">
    <div>
        <div style="height:100px; background:blue;">text</div>
        <div style="height:50px; background:yellow;">text</div>
        <div style="height:50px; background:green;">text</div>
    </div>
</div>

そして、次のように内部要素の高さを取得できます。

$('div.main > div').outerHeight()

また、ここに笑機能があります：

function lol() { 
    $("div.main").animate({height:$('div.main > div').outerHeight()}, 1000);
}​
于 2012-08-15T02:11:32.853 に答える
0

値を計算するために精神的に行ったのと同じことをプログラムで行うことができ200pxます: s の高さを合計しdiv.main > divます。

function lol() {
    var $main = $("div.main"),
        totalHeight = 0;

    $main.children().each(function () {
        totalHeight += $(this).height();
    });

    $main.animate({height: totalHeight}, 1000);
}

http://jsfiddle.net/mattball/CXyKK

于 2012-08-15T01:57:21.760 に答える