在隐藏div加载时保留空白区域

Question

In the code below, a div is hidden until it gets OK from a 3rd-party server, and then it's rendered via jquery. The purpose is to create an impression of smooth loading. The problem is that the paragraph below this div is pushed down after the div is loaded, which defeats the purpose of the trick. What's the best way to fix that?

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

Give the element a size, and set it's opacity to zero so the content is invisible

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

Then animate in the content

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

FIDDLE