Question

我有一个网站，其中包含内容div和导航栏（看起来像三个标签）。我也在页面上有JQuery。这就是JQuery正在做的......当你点击其中一个标签时，它应淡出整个div，更改div的内容以与所选的标签相对应（这是通过ajax命中到外页），最后再次淡入div。

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

谢谢！

JQUERY：

$(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>

Answer 1

我的猜测是，在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 ...

Answer 2

出于某种原因，当您尝试更改标题时似乎存在问题，如果删除则没有错误。

说完了：

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

    });
});

jquery fadeOut / fadeIn不在IE中工作

2 个答案: