javascript - 非表示/表示アニメーションでコンテナを展開/縮小

Question

アニメーションのサイズ変更中にコンテナの高さを流動的にする簡単な方法があると思っていましたが、そうであれば忘れていました。プログラムで実行する前に、ここで運試しをしようと思いました。

アイデアは、アニメーションの後に所定の位置にスナップするのではなく、アニメーションのように下部<hr />が優雅に上下に移動する必要があるということです-これはサイズ変更されていないためです.#content#container

フィドルを見る

HTML:

<button id="trigger">trigger</button>
<hr />
<div id="container">
    <div id="content">foo
        <br />foo
        <br />foo
        <br />foo
        <br />foo
        <br />
    </div>
</div>
<hr />

JS:

$('#trigger').click(function () {
    var $content = $('#content');
    if (!$content.hasClass('hidden')) {
        $content.stop(true, true).hide('drop', {
            easing: 'easeInQuad',
            direction: 'up'
        }, 'slow');
        $content.addClass('hidden');
    } else {
        $content.stop(true, true).show('drop', {
            easing: 'easeInQuad',
            direction: 'up'
        }, 'slow');
        $content.removeClass('hidden');
    }
});