html - iframe 褪色页面长度问题

Question

您好，我正在将 iframe 淡入页面:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#doneimg").fadeIn(500);
});//]]>  
</script>

<div style="display: none;" id="doneimg">
        <iframe src="http://om-p.com" width="90%" height="400" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>
    </div>

但问题是页面加载就像没有元素一样所以页面长度非常小，一旦框架开始淡入增加。

那么我怎样才能使页面的长度不变，而是从一开始就保持不变呢？

Answer 1

首先，将 display: none; 更改为 visibility: hidden:

<div style="visibility: hidden;" id="doneimg">

然后为不透明度设置动画:

$("#doneimg").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 500);

(因为普通的 show 和 fadeIn 正在使用 display 它们将不再“工作”)

Live test case .