使 iframe 淡入淡出

Posted 2023-05-08

【中文标题】使 iframe 淡入淡出

【英文标题】：Making iframe fadein

【发布时间】：2012-02-13 07:07:12

【问题描述】：

我想让我的 iframe 在访问者加载网站后立即淡入：

我试过了：

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

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

但它不起作用！

感谢您的帮助

这是一个例子： http://jsfiddle.net/zfFXr/

我可以访问我正在淡入的页面！

【问题讨论】：

究竟是什么不起作用？我假设$('#doneimg') 检索到正确的元素。你试过用 div 代替 span 吗？

对我来说似乎工作正常...jsfiddle.net/johncmolyneux/7fba5

@MarceloDiniz a span 不是块级元素，不应该用于此

【参考方案1】：

下面似乎对我有用，jsFiddle 这里

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

但请注意，这只是在 3 秒内淡入，不会等到 iframe 加载或不加载。

【讨论】：

+1 如何更改脚本以便在加载 iframe 时出现淡入淡出？

好像你不能..见***.com/questions/30005/…

【参考方案2】：

通过克隆位置并添加更大的 z-index，在 iframe 上创建一个具有绝对定位的叠加层，将其淡出并删除。

【参考方案3】：

它正在淡入。如果将其设置为 fadeIn("slow") 那么您会看到 iframe 本身正在慢慢淡入（即它的边框），但这不会影响页面在框架。我认为该页面淡入的代码必须在该页面上。

【参考方案4】：

您可以使用 JQuery 的 .on() 函数来检测 iframe 何时完成加载。见这里：https://***.com/a/30012/5287820