的slideToggle留下空白

所以我忙着在這個項目上，其中包括旗幟，以向上和向下滑動，點擊一個按鈕：的slideToggle留下空白

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

正如你可以看到，每當open按鈕被點擊，橫幅會向上或向下滑動，具體取決於當前的狀態。

但是當旗幟上滑，還有正在創建一個空的空間，你可以在例如1可知：

Example 1

並顯示橫幅時，還有留下很小的空間，這是影響我想有，你可以在例如2看到：

Example 2

（在「parkbench」就是旗幟的底部，但如果我screenshotted完整的圖像後會）

現在，我想要實現的是兩個項目之間的空間保持不變，所以當橫幅未顯示時也是如此。

的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這是不封閉的，但那是因爲有其下另一格，這是不是真的neccecairy的提問。

有沒有辦法達到我想達到的效果？

感謝，

羅布

來源

2014-12-04 Wesley Peeters

演示會很有用，但這可能是由於您在那裏的保證金最高， – 2014-12-04 16:58:49

我用下面的方法解決了這個問題：

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

史迪威，感謝所有壽答案！

來源

2014-12-04 17:47:53

它好像額外的空間是由下面的div與大邊距設置的佈局造成的。最快的解決方法是通過slideToggle調用在相同的JS函數中更改margin-top，但理想情況下，您希望消除float和大的margin-top，並找到一種使用常規頁面流實現該佈局的方法。

來源

2014-12-04 17:01:25

http://jsfiddle.net/9qrypcm4/1/ – 2014-12-04 17:14:52

的slideToggle留下空白

回答

相關問題