Question

我正试图让pane1淡入pane2。它适用于图像，但我想用iframe来做。这可能吗？任何意见都非常感谢。

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;
}

提前致谢！

修改：实时上传，with images和with iframes

Answer 1

没有关于为什么会这样做的CLUE，但是如果你用完整的标签结束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>

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

1 个答案: