Question

我有一个overflow:hidden的div和一个设定的高度。当我运行animate()时，我希望将高度设置为完整大小的动画。

例如，我有这个：

<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

JQuery animate（）到最大高度

3 个答案: