jquery - Fading in a previously hidden iframe in Firefox

Question

CSS

iframe {
  display: none;
}

JS

$('iframe').load(function() {
    $('iframe').fadeIn('slow');
});

HTML

<a href="http://example.com" target="ifrm">external link</a>

<iframe name="ifrm"></iframe>

The above works in IE and Chrome, but when I try it out in Firefox, the iframe never displays. Any workarounds ?

Answer 1

Wrap it in a div and fade that in.

<a href="http://example.com" target="ifrm">external link</a>
<div id="iframeContainer" style="display:none;">
    <iframe name="ifrm"></iframe>
</div>

$(function() {
    $('iframe').load(function() {
        $('#iframeContainer').fadeIn('fast');
    });
})