使用 jQuery 在两个 div 之间淡入淡出，图像有效，iframe 不起作用

Question

Edit:实时上传，带有图片和iframes

我想让pane1褪色成pane2。它适用于图像，但我想用框架来做。这可能吗?如有任何意见，不胜感激。

JS是这样的

$(function() {
$("#tab ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});

HTML是这样的

<div id="tab">
    <ul>
        <li>
            <a href="#1">Tab 1</a>
        </li>
        <li>
            <a href="#2">Tab 2</a>
        </li>
    </ul>
</div>  

[…]

<div id="panes">
    <div>
        <iframe src="pane1.html" width="720" height="200" frameborder="0" scrolling="no" />
    </div>
    <div>
        <iframe src="pane2.html" width="720" height="200" frameborder="0" scrolling="no" />
    </div>
</div>

加载时，pane1 iframe按预期显示，单击Tab 2将其淡出，但它将淡出。

但是，使用与上面完全相同的代码可以完美地工作，但是在div: 中使用图像

<div id="panes">
    <div>
        <img src="images/pane1.png" />
    </div>
    <div>
        <img src="images/pane2.png" />
    </div>
</div>

下面是相关的CSS

#tab ul {   
    width:720px;
    margin: 0 auto 0;
    left: 0;
}
#tab li {   
    float:left;
    list-style-type:none;
    margin-top:0px;
    }
#tab a {
    display:block;
    position:relative;
    text-decoration:none;
    color: #5472c0;
    }   
#tab a.current {
    color: #272f80;
    }
#panes {
    position:relative;
    height: 212px;
    left: 50%;
    width:720px;
    margin-left: -360px;
    margin-top: 16px;
}

提前感谢!

编辑:实时上传，带有图片和iframes

Answer 1

没有线索，为什么这工作，但如果你结束的iFrames与一个完整的标签，它似乎工作。

    <div id="here">
        <iframe src="http://www.vitalitypilates.com/tabtest/pane1.html" width="720" height="200" frameborder="0" scrolling="no"></iframe>
    </div>
    <div id="gone">
        <iframe src="http://www.vitalitypilates.com/tabtest/pane2.html" width="720" height="200" frameborder="0" scrolling="no"></iframe>
    </div>