Question

Hi so I am fading my iframe into the page:

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

but the problem is that the page loads like if there were no element
so the page length is very small and as soon as the frame has started to fadein increases.

So how can I make the page not change its length but rather have it constant fromt he start?

Answer 1

First, change display: none; to visibility: hidden:

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

Then animate the opacity:

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

(Since the ordinary show and fadeIn are using the display they won’t “work” anymore)

Live test case.