I would like to make my iframe fadein as soon as the visitor has loaded the website:

I have tried :

<script type="text/javascript">
    $(document).ready(function () {
        $('#doneimg').fadeIn("normal");
    });
</script>

        <span style="display: none;" id="doneimg">
            <iframe src="" 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>
        </span>

but it does not work!

thanks for you help

here is an example: /

I have acces to the page which I am fading in!

I would like to make my iframe fadein as soon as the visitor has loaded the website:

I have tried :

<script type="text/javascript">
    $(document).ready(function () {
        $('#doneimg').fadeIn("normal");
    });
</script>

        <span style="display: none;" id="doneimg">
            <iframe src="http://om-p." 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>
        </span>

but it does not work!

thanks for you help

here is an example: http://jsfiddle/zfFXr/

I have acces to the page which I am fading in!

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 18, 2012 at 15:17 Jimbo Mombasa asked Jan 18, 2012 at 14:57 Jimbo MombasaJimbo Mombasa 51822 gold badges66 silver badges1515 bronze badges 3

• What exactly doesn't work? I assume $('#doneimg') retrieves the correct element. Did you try using a div instead of a span? – Marcelo Diniz Commented Jan 18, 2012 at 15:02
• Seems to work fine for me... jsfiddle/johncmolyneux/7fba5 – Reinstate Monica Cellio Commented Jan 18, 2012 at 15:08
• @MarceloDiniz a span is not a block level element and should not be used for this – Eonasdan Commented Jan 18, 2012 at 15:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Below seems to be working for me, jsFiddle here

$(document).ready(function () {
  $('#doneimg').fadeIn(3000);
});

But please note that this just fadeIn in 3 secs, doesn't wait till iframe is loaded or not.

Make an overlay layer with absolute positioning over the iframe by cloning the position and adding a larger z-index, fade it out and delete it.

It is fading in. If you set it to fadeIn("slow") then you will see that the iframe itself is fading in slowly (ie the borders of it) but that does not affect the loading of the page within the iframe. The code for that page fading in would have to be on that page I think.

You can use JQuery's .on() function to detect when the iframe has finished loading. See here: https://stackoverflow./a/30012/5287820