set height on element after a slidedown()

Question

i got a click thats triggers a slideDown() on a div. my thought is that after the div is expanded i set the height of another div based on the expanded div. The problem becomes that it takes the height and sets it before the other div is slided fully, for a fact it takes the height of the div that it got before it slide out.

is there a way to pause everything until the slideDown() is done?

$div.slideDown();

//sets the height of the Container
$outer_container.css("height", $inner_container.outerHeight());

Answer 1

Use the callback function, which only runs once the animation is complete:

$div.slideDown(400, function() {
    //sets the height of the Container
    $outer_container.css("height", $inner_container.outerHeight());
});

Or, to use a slightly more compact apprach:

$div.slideDown(400, function() {
    $outer_container.height($inner_container.outerHeight());
});