jquery, некоторые вопросы/вопросы с анимацией()

Question

Внутри 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 requete, я бы не смог сохранить его высоту с $ ('# bottom'). Height() как я сделал?

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

Answer 1

Я думаю, что это хороший эффект и хороший способ сделать то, что вы пытаетесь сделать. Проверьте это. Я думаю, что это немного чище и также очень хороший эффект: http://jsfiddle.net/K6QJS/2/

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