jquery fadeOut/fadeIn не работает в IE

У меня есть сайт, на котором есть 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>

jquery internet-explorer fadein fadeout
person RyanPitts    schedule 05.10.2010    source источник
comment
Есть ли особая причина, по которой вы использовали собственное решение для вкладок вместо использования вкладок jQueryUI?   -  person Ender    schedule 05.10.2010

Ответы (2)


arrow_upward
1
arrow_downward

По какой-то причине возникает проблема, когда вы пытаетесь изменить заголовок, если вы удалите его, ошибки нет.

Было сказано, что:

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

    });
});
person armonge    schedule 05.10.2010

arrow_upward
1
arrow_downward

Я предполагаю, что что-то не работает с очередями в 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(){});
});

Это предотвращает выполнение вызова fadeIn до тех пор, пока не завершится затухание. Это должно быть сделано автоматически, но тогда это это IE...

person lonesomeday    schedule 05.10.2010