jquery - 运行多个 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 问题，因此尝试使用顶部（主框使用位置：相对；）、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;
}