jquery，一些问题/动画问题（）

Question

在div #frame里面我有3个div：#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在动画完成时显示，是否可以在动画显示的同一时间显示它们？

Finaly如果#bottom的html来自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(); 
    });  
});