Making iframe fadein

Question

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.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>
        </span>

but it does not work!

thanks for you help

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

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

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

score 4 · Accepted Answer · answered Jan 18 '12 at 15:07

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.

answered Jan 18 '12 at 15:07

Selvakumar Arumugam

79,297
15
120
134

+1 how can I change the script so the fadein occurs when the iframe is loaded? – Jimbo Mombasa Jan 18 '12 at 15:16
Seems like you cannot.. see http://stackoverflow.com/questions/30005/how-do-i-fire-an-event-when-a-iframe-has-finished-loading-in-jquery – Selvakumar Arumugam Jan 18 '12 at 15:17

score 0 · Answer 2 · answered Sep 03 '17 at 16:29

0

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

answered Sep 03 '17 at 16:29

wpgbrown

40
9

score 0 · Answer 3 · answered Jan 18 '12 at 14:59

0

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.

answered Jan 18 '12 at 14:59

petermolnar

1,626
14
23

nobody · Answer 4 · 2012-01-18T15:14:15.107

0

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.

edited Jan 18 '12 at 15:14

answered Jan 18 '12 at 15:08

nobody

269
2
3

Making iframe fadein

4 Answers4