jquery, некоторые проблемы / вопросы с animate ()

Внутри div #frame у меня есть 3 divs: #top, #middle и #bottom.

#top и #bottom на дисплее нет, и когда я нажимаю на #middle, я показываю их.

Мои css:

#frame{
    position: absolute;
    top:30px;
    left:30px;
    border-style: solid;
    border-width: 1px;
    width:200px;
    height:200px;
}

#middle{
    width:200px;
    height:200px;
    position: absolute;
    top:0px;
}

#top{
    display:none;
    background-color:red;
    width:100%;
}

#bottom{
    position:absolute;
    display:none;
    bottom:0px;
    background-color:red;
    width:100%;
}

мой html:

<div id="frame">
    <div id="top">top</div>
    <div id="middle">middle</div>
    <div id="bottom">bottom<br>bottom<br>bottom<br>bottom</div>
</div>

и мой jQuery:

$('#middle').click(function () {
    $('#middle').animate({'top':'19px'});
    $('#frame').animate({
        'height':$(this).height()+$('#bottom').height()+20,
        'top':$(this).offset().top-20
    },function(){
        $('#top').show();
        $('#bottom').show();
    });     
});

Здесь jsFiddle: http://jsfiddle.net/malamine_kebe/K6QJS/1/

Поэтому у меня есть несколько вопросов:

Считаете ли вы, что это хороший способ сделать эффект?

Теперь #top и #bottom показывают, когда анимация завершена, можно ли показывать их одновременно с анимацией?

Наконец, если html #bottom исходит из ajax-реквиета, я бы не смог сохранить его высоту с $ ('# bottom'). Height(), как я?

Большое спасибо за вашу помощь...