CODEWITHSUNDEEP
javascriptjquery
supercoolville
supercoolville

Reputation: 9086

JQuery animate() to maximum height

I have a div with overflow:hidden and a set height. When I run animate(), I want the height to animate to the full size.

For example, I have this:

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>

This example works, but only because I knew the total height of all the elements.

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

^How can I recreate that without knowing the total animate height?

Upvotes: 1

Views: 3478

Answers (3)

Bilal Gultekin
Bilal Gultekin

Reputation: 5311

If changing html code isn't a problem, you can simply change your html code like this:

<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>

​and you can get height of inner elements like this:

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

and also here is the lol function:

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

Upvotes: 1

xdazz
xdazz

Reputation: 160863

A Fixed version for @MattBall's answer, which use the .outerHeight(true) to include the inner div's margins.

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

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

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

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359846

You could do programmatically the same thing that you did mentally to come up with the 200px value: sum the height of the div.main > divs.

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

Upvotes: 0

Related Questions