jquery fadeOut/fadeIn not working in IE

Question

I have a site that has a div with content and a navbar (looks like three tabs) in it. I have JQuery on the page as well. This is what the JQuery is doing...when you click on one of the tabs, it should fade out the whole div, change the content of the div to correspond with tab that was selected (this is done through an ajax hit to the external page), and finally fade in the div again.

My problem is that IE won't fade the div back in. Not sure how to fix this. Any help is appreciated.

Thanks!

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 CODE:

<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

My guess is that something isn't working with queueing in IE. Try putting the fadeIn call into the fadeOut callback, e.g.:

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

This prevents the fadeIn call from being made until the fadeOut is complete. This should be done automatically, but, then, it is IE...

Answer 2

For some reason there seems to be a problem when you try to change the title, if you remove that there's no error.

Having said that:

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

    });
});