jquery - 複数の jQuery エフェクトを実行する際のレイアウトの問題

Question

複数の jQuery エフェクトを実行すると、レイアウトの問題が発生します。2 番目の div を表示するスペースを確保するために、div を 100 ピクセル下に移動しようとしています。メインの div は 100 ピクセル下に移動していますが、100 ピクセルの高さの 2 番目の div に必要なスペースに対応するために、さらに 100 ピクセルジャンプしています。私の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;
}