在隱藏div加載時保留空白區域

Question

在下面的代碼中，div被隱藏，直到它從第三方服務器獲得OK，然后通過jquery呈現。 目的是給人一種平滑加載的印象。 問題是該div下方的段落在div加載后被下推，這違背了技巧的目的。 解決這個問題的最佳方法是什么？

http://jsfiddle.net/Sh7aA/7/

<div id="fb-root"></div>
<p style="text-align:center">Follow us!</p>
<center style="display: none;" id="social">
    <div class="g-plusone" data-size="medium"></div>
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</center>

<p style="text-align:center">Test paragraph of text<br>
Paragarph continued</p>

Answer 1

設置加載內容的容器的min-height ，以匹配加載內容的高度。

Answer 2

為元素指定大小，並將其不透明度設置為零，以使內容不可見

#social {opacity: 0; height: 25px; width: 100%; position: relative;}

然后在內容中制作動畫

$('#social').animate({opacity : 1}, 1000);

小提琴