javascript - 流畅的动画效果

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中工作，我没有测试过其他浏览器。