javascript - JQuery animate() 到最大高度

Question

我有一个 divoverflow: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值相同的事情：对 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