jQuery/CSS转换：在三个可变高度之间设置动画，1为自动

根据我在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');
});

这个很好用。但是，我的一个div包含一些表单字段，用户可以与之交互，并向该div添加更多数据。我如何进一步设置该div的动画以同时设置更大的动画？我试过大量使用“最大最小高度”之类的东西，但没有找到合适的脚本组合

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

.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;
}