jquery fadeOut/fadeIn 在 IE 中不起作用答案

【问题标题】：jquery fadeOut/fadeIn not working in IEjquery fadeOut/fadeIn 在 IE 中不起作用
【发布时间】：2010-10-05 23:32:30
【问题描述】：

我有一个网站，其中有一个包含内容的 div 和一个导航栏（看起来像三个选项卡）。我在页面上也有 JQuery。这就是 JQuery 正在做的事情...当您单击其中一个选项卡时，它应该淡出整个 div，更改 div 的内容以与选择的选项卡相对应（这是通过对外部页面），最后再次淡入div。

我的问题是 IE 不会将 div 淡入。不知道如何解决这个问题。任何帮助表示赞赏。

谢谢！

查询：

$(window).ready(function(){
    $(".navbar.home").click(function(){
        $(this).parent().fadeOut(150, function(){
            $(this).find("div:eq(3)").load("info.html");
            $("#mainWrapper").css("background-image","url(images/backHome.png)");
            $("title").html("Ndoto - For Africa's Future");
        });
        $(this).parent().fadeIn(150, function(){});
    });
    $(".navbar.visionMission").click(function(){
        $(this).parent().fadeOut(150, function(){
            $(this).find("div:eq(3)").load("visionMission.html");
            $("#mainWrapper").css("background-image","url(images/backVisionMission.png)");
            $("title").html("Vision and Mission Statement | Vision/Mission | Ndoto - For Africa's Future");
        });
        $(this).parent().fadeIn(150, function(){});
    });
    $(".navbar.donate").click(function(){
        $(this).parent().fadeOut(150, function(){
            $(this).find("div:eq(3)").load("donate.html");
            $("#mainWrapper").css("background-image","url(images/backDonate.png)");
            $("title").html("Donate and help a Student | Donate | Ndoto - For Africa's Future");
        });
        $(this).parent().fadeIn(150, function(){});
    });
});

HTML 代码：

<div id="mainWrapper">
<div style="cursor: pointer;" class="navbar home">home</div>
<div style="cursor: pointer;" class="navbar visionMission">vision/mission</div>
<div style="cursor: pointer;" class="navbar donate">donate</div>
<div id="home">
<div class="clear">&nbsp;</div>
<div class="headline">dream&nbsp;&nbsp;-&nbsp;&nbsp;volunteer&nbsp;&nbsp;-&nbsp;&nbsp;invest</div>
<div class="clear">&nbsp;</div>
<div class="text-body home">
At Ndoto we believe that education is a fundamental piece to the complicated puzzle of eradicating poverty.  Without an education, young people will forever struggle to find regular employment, instead depending on the day-to-day sustenance of small informal businesses.  In addition, going to school is an excellent way to get young people focused, working hard, and exposed to new things that expand their world view.  Therefore, our student sponsorship program forms the core of Ndoto.
<br><br>
If transformation is to happen, it has to happen in all areas of a person’s life.  Ndoto’s students are encouraged to <strong>dream</strong> about what they want to do and how it will impact their country.  Then, they are given the opportunity to put this into action by going to school.  They are held accountable for how they use their education, as they must maintain grades, <strong>volunteer</strong> in their community, meet with a mentor, participate in a Christian community, and <strong>invest</strong><br>in the lives of others.
</div>
</div>

【问题讨论】：

您推出自己的选项卡解决方案而不是使用 jQueryUI 选项卡是否有特殊原因？

标签： jquery internet-explorer fadein fadeout

【解决方案1】：

由于某种原因，当您尝试更改标题时似乎有问题，如果您删除它就没有错误。

话虽如此：

$(function(){
    $(".navbar.home").click(function(){
        $(this).parent().fadeOut(150, function(){
            $(this).find("div:eq(3)").load("info.html");
            $("#mainWrapper").css("background-image","url(images/backHome.png)");
             document.title  ="Ndoto - For Africa's Future</title>";
            $(this).fadeIn(150);
        });

    });
    $(".navbar.visionMission").click(function(){
        $(this).parent().fadeOut(150, function(){
            $(this).find("div:eq(3)").load("visionMission.html");
            $("#mainWrapper").css("background-image","url(images/backVisionMission.png)");
             document.title = "Vision and Mission Statement | Vision/Mission | Ndoto - For Africa's Future";

            $(this).fadeIn(150);
        });

    });
    $(".navbar.donate").click(function(){
        $(this).parent().fadeOut(150, function(){
            $(this).find("div:eq(3)").load("donate.html");
            $("#mainWrapper").css("background-image","url(images/backDonate.png)");
             document.title ="Donate and help a Student | Donate | Ndoto - For Africa's Future";

            $(this).fadeIn(150, function(){});
        });

    });
});

【讨论】：

【解决方案2】：

我的猜测是 IE 中的队列无法正常工作。尝试将fadeIn 调用放入fadeOut 回调中，例如：

$(this).parent().fadeOut(150, function(){
    $(this).find("div:eq(3)").load("visionMission.html");
    $("#mainWrapper").css("background-image","url(images/backVisionMission.png)");
    $("title").html("Vision and Mission Statement | Vision/Mission | Ndoto - For Africa's Future");
    $(this).parent().fadeIn(150, function(){});
});

这可以防止在fadeOut 完成之前进行fadeIn 调用。这应该是自动完成的，但是，它是 IE...

【讨论】：