JQuery animate（）到最大高度

Question

我有一個overflow:hidden的div overflow:hidden和設定的高度。 當我運行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>

^如何在不知道總動畫高度的情況下重新創建它？

Answer 1

@ MattBall答案的固定版本，它使用.outerHeight(true)來包含內部div的邊距。

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

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

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

Answer 2

如果更改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()

這里也是lol函數：

function lol() { 
    $("div.main").animate({height:$('div.main > div').outerHeight()}, 1000);
}​

Answer 3

您可以通過編程方式執行與精神上相同的事情來提出200px值：總和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