jquery，animate() 的一些问题/问题

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 在动画结束时显示，是否可以在动画播放的同时显示它们？

最后，如果 #bottom 的 html 来自 ajax 请求，我是否可以像我一样用 $('#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();
    });     
});