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

我在运行多个jQuery效果时遇到布局问题。我正在尝试将一个div向下移动100像素，以便为第二个div的出现腾出空间。我的主div向下移动100px，然后再跳100px以容纳100px高的第二个div所需的空间

$(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；）、margintop和padding top设置框的动画

CSS

---

使用

margintop

或更好的定位和

top

属性<代码>填充增加元素内部的高度。CSS将很有趣。将CSS添加到问题中并进行更改。设置动画以使用top。在动画中，您可以将第一行和最后一行链接在一起。那么你不会选择两次。

#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;
}