slideToggle留下空白空间

Question

所以我忙于这个项目，它涉及一个横幅按钮点击上下滑动：

 $("#open").click(function() {
    $("#banner").slideToggle("slow");
  });

正如您所看到的，只要点击open按钮，横幅就会向上或向下滑动，具体取决于它的当前状态。

但是当横幅向上滑动时，正如您在示例1中看到的那样，创建了一个空白区域：

当横幅显示时，剩下的空间非常小，这就是我想要的效果，正如您在示例2中看到的那样：

（'parkbench'的东西是横幅的底部，但是如果我截图完整的图像，那么帖子就会很长。）

现在，我想要实现的是两个项目之间的空间保持不变，所以当横幅未显示时也是如此。

HTML非常简单：

    <div id="banner">
            <div id="djbanner"></div>
        </div>



<div style="float:left; margin-left:0.55%; margin-top:210px; width:42%">
<div class="vak">
    <div class="vak_top"><p class="text">Box</p></div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, 
</div>

我知道有一个没有关闭的div，但那是因为它下面还有另一个div，这个问题并不是真的很糟糕。

有没有办法达到我想达到的效果？

谢谢，

罗布

Answer 1

似乎额外的空间是由它下方div的布局引起的，并且边缘设置较大。最快的修复方法是使用slideToggle调用在同一JS函数中更改margin-top，但理想情况下，您希望消除浮动和大边距顶部并找到使用常规页面流来实现该布局的方法

Answer 2

我使用以下方法解决了问题：

 if ($('#banner').css("display") == "none") {
    $("#banner").slideDown(2100);
    $("#contentmain").animate({marginTop: '-329px'}, 1500);
 } else {
        $("#banner").slideUp(2100);
        $('#contentmain').animate({marginTop: '-480px'}, 1500);
    }
});

Stil，谢谢你的所有答案！