Question

在下面的代码中，div被隐藏，直到从第三方服务器获得OK，然后通过jquery呈现它。目的是创造平滑装载的印象。问题是这个div下面的段落在加载div之后被推下来，这违背了技巧的目的。解决这个问题的最佳方法是什么？

<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);

FIDDLE

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

2 个答案: