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 requete，我是否可以用$（'＃bottom'）来保存它的高度。我是这样的高度（）？

非常感谢你的帮助......

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();
    });     
});

jquery，animate（）的一些问题/问题

1 个答案: