使用 jquery 淡出正文 iframe/对象答案

【问题标题】：FadeOut a body iframe/object with jquery使用 jquery 淡出正文 iframe/对象
【发布时间】：2013-02-06 20:13:37
【问题描述】：

我想在单击链接时淡出 iframe 内容，但找不到方法！
这是我的代码不起作用：

<object type="text/html" data="page.html" id="framecontent" width="100%" height="100%"></object>

<script type="text/javascript">
$(document).ready(function() {
    $("#mylink a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#framecontent").find("body").fadeOut('slow', redirectPage);
    });
    function redirectPage() {
        $("#framecontent").attr("data", linkLocation);
    }
});
</script>

【问题讨论】：

请问您为什么要尝试淡出正文而不是整个 iFrame？毕竟，所有可查看的 HTML 都包含在正文中，所以仅通过淡出 iFrame 就不能达到相同的效果吗？
嗯，当我点击不同的链接时，我正在尝试制作一个简单的 FadeOut 和 FadeIn 效果。所以这个想法是点击一个链接，这应该fadeOut，在这个加载之后点击的页面有： $(document).ready(function() {$("body").fadeIn('slow');});

标签： jquery object iframe fadeout

【解决方案1】：

fadeOut() 似乎不适用于 <object>，但如果您使用 <iframe> 应该可以。

【讨论】：

【解决方案2】：

好吧，我将对象更改为 iFrame 并实现了代码以淡出 iFrame、更改页面并在加载后淡入 iFrame - 这就是您要找的吗？ http://jsfiddle.net/edapU/2

<iframe src="http://www.bing.com" id="framecontent" width="100%" height="500px"></iframe>
<div id="mylink">
    <a href="http://www.bing.com">Bing</a><br/>
    <a href="http://www.car.com">Car.com</a><br/>
    <a href="http://www.microsoft.com">Microsoft</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $("#mylink a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#framecontent").fadeOut('slow', redirectPage);
    });
    function redirectPage() {
        $("#framecontent").attr("src", linkLocation).load(function(){$(this).fadeIn('slow');});
    }
});
</script>

【讨论】：