运行多个jQuery效果时的布局问题

Question

运行多个jQuery效果时遇到布局问题。我试图将一个div向下移动100px以便为第二个div腾出空间。我的主要div向下移动100px然后再跳100px以适应100px高秒div所需的空间。我的jQuery代码如下;

$(function() {
    function runMenuEffect() {
        $( "#main-bottom-area" ).animate({top:"100px"}, 1000);
        $( ".slide-area" ).delay(1000).show( "drop", 1300 );
        $( ".maincontent-right-nav" ).delay(1500).hide( "fade", 1500 );
        $( "#main-bottom-area" ).delay(1500).animate({opacity: 0.5}, 1000);
    };
    $( "#sub-show-more" ).click(function() {
       runMenuEffect();
       return false;
    });
    $( ".slide-area" ).hide();
});

我认为这可能是一个css问题所以试图使用top（主框使用position：relative;），margin-top和padding top来为框设置动画。

CSS;

#main-bottom-area {
    position: relative;
    top:0px;
}

.slide-area {
    min-height:100px;
    position:relative;
    overflow:hidden;
    margin-top: 0;
    margin-right: -9999px;
    margin-bottom: 0;
    margin-left: -9999px;
    padding-top: 0;
    padding-right: 9999px;
    padding-bottom: 0;
    padding-left: 9999px;
}