jQuery Iframe链接淡入-淡出

我遇到的问题是在小提琴上。当我点击About链接时，iframe会随着文本一起淡入（文本位于About-me.html文件中，我不知道如何将其包含在fiddle中，它只是一个简单的h1标题文本，下面有一个段落），但当我点击公文包链接时，公文包-me.html中的文本只会出现在iframe中，不会淡入。当我点击About链接时，我希望iframe与文本一起淡入，当我点击公文包链接时，我希望iframe（以及About me.html中的About文本）淡出，并与公文包-me.html一起淡入iframe，以此类推。请你帮我解决这个问题，解释一下，包括这个问题的其他解决方案，并解释一下？我是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);
        });
    });
});

---

这应该适合你。请注意，为了改进代码，我对HTML和CSS进行了一些修改

HTML:

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

小提琴：

---

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

这应该适合您。请注意，为了改进代码，我对HTML和CSS进行了一些修改

HTML:

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

小提琴：

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

$(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;
    });
});