jquery - jQuery/CSS Transition: 3 つの可変高さの間でアニメーション化します。1 つは自動です

Question

Stack で見つけた情報に基づいて、div の高さを設定した高さから自動の高さにアニメートし、元に戻すために次のことを行いました。

$('.parent').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});
$('.parent').click(function(){
    var el = $(this);
    if ($(this).css('height') == '20px') {
        $(this).css({
            height: $(this).data('height'),
            cursor: 'auto'
        });
        $(this).children('.closeButton').fadeIn();
    }
});
$('.closeButton').click(function(){
    var el = $(this).parent();
    var button = $(this);
    el.css('height','0');
    setTimeout(function(){
        el.css({
            height: '20px',
            cursor: 'pointer'
        });
        button.fadeOut();
    },150);
});
$('.makeBigger').click(function(){
   html = 'TONS OF CONTENT MAKES ME BIGGER<br/>TONS OF CONTENT MAKES ME BIGGER<br/>TONS OF CONTENT MAKES ME BIGGER<br/>';
   $('#bigger').append(html);
   $('#bigger').css('height','auto');
});

要素の HTML は本質的に次のとおりです。

<div class="parent">
    <div class="closeButton">close</div>
    CONTENT
</div>

<div class="parent" id="bigger">
    <div class="closeButton">close</div>
    CONTENT
    <div class="makeBigger">EVEN BIGGER</div>
</div>

CSS:

.parent {
    background: red;
    overflow: hidden;
    cursor: pointer;
   margin: 30px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
}
.closeButton {
    display: none;
    cursor: pointer;
    float: right;
}

http://jsfiddle.net/3uFaq/

これはうまくいきます。ただし、私の div の 1 つには、ユーザーが操作できるいくつかのフォーム フィールドが含まれており、その div にさらにデータを追加します。その div をさらにアニメーション化して、より大きくアニメーション化するにはどうすればよいですか? 高さの最大値と最小値などを広範囲に試してみましたが、スクリプトの適切な組み合わせが見つかりませんでした。