流畅的动画效果

Question

http://jsfiddle.net/HGCaF/6/ 当我向下移动页面并备份时，我试图使我的div移动更顺畅，这很难描述，但如果你看一下链接，你就会开始理解我的意思， 以下是网页的示例结构：

<div id="window">
    <div id="title_bar">
        <div id="button">-</div>
    </div>
    <div id="box">
    </div>
 </div>

Answer 1

这是一种方法：

CSS：

#window{
    width:400px;
    border:solid 1px;
    position:absolute;
}

JavaScript的：

$("#button").click(function(){
    $("#box").slideToggle();

    if($(this).html() == "-"){

        $(this).html("+");
        setTimeout(function() {
            $('#window').css('top', 'auto');
            $('#window').animate({ 'bottom': '0' }, 500);
        }, 500);
    }
    else{
        $(this).html("-");

        setTimeout(function() {
            $('#window').animate({ 'top': '0' }, 500);
            $('#window').css('bottom', 'auto');
        }, 500);
    }
});

在FF中工作，我还没有测试过其他浏览器。