Question

我遇到的问题是小提琴。当我点击“关于”链接时，iframe会淡入文本（文本位于about-me.html文件中，我不知道如何包含在小提琴中，而且它只是简单的h1标题文本，下面有一个段落），但是当我点击Portfolio链接时，portfolio-me.html中的文本只会出现在iframe中并且它不会淡入。我希望iframe在我单击About链接时淡入文本，当我点击我希望iframe（以及about-me.html中的About文本）的投资组合链接淡出淡出淡入淡出iframe，使用portfolio-me.html依旧等淡出其他链接。您能否为我解决这个问题，解释一下，并为此问题包含其他解决方案并解释它们？我是jquery的初学者，我试图通过添加数据和卸载东西解决它，但它没有用。提前谢谢！

$(document).ready(function () {
    $(".about").on("click",function(){
        $('iframe').load(function() {
            $('#iframeContainer').fadeIn(1000);
        });
    });

    $(".about").on("click",".portfolio",function(){
        $("iframe").load(function(){
            $("iframeContainer").fadeOut(1000);
        });
    });
});

http://jsfiddle.net/VA6Hr/

Answer 1

这对你有用。请注意，我已经更改了HTML和CSS的位以改进代码。

HTML：

<ul class="bmenu">
    <li><a href="about-me.html" class="about">About</a></li>
    <li><a href="portfolio-me.html" class="portfolio">Portfolio</a></li>
    <li><a href="blog-me.html" class="blog">Blog</a></li>
    <li><a href="contact-me.html" class="contact">Contact</a></li>
</ul>

<div id="iframeContainer">
  <iframe src="" scrolling="no"></iframe>
</div>

CSS：

#iframeContainer { display: none; }

iframe {
    margin-left:100px;
    width:300px; height:300px;
    border: 1px solid #000; }

jQuery的：

$(document).ready(function () {
    $('ul.bmenu a').click(function(){
        var iframeSrc = $(this).attr('href');
        $('#iframeContainer').fadeOut(1000,function(){
            $('#iframeContainer iframe').attr('src',iframeSrc);
            $('#iframeContainer').fadeIn(1000);
        });
        return false;
    });
});

小提琴：http://jsfiddle.net/VA6Hr/1/

此代码使用链接hrefs作为iframe的src。

jQuery iframe Link Fade In - FadeOut

1 个答案: