2010-10-05 133 views
1

我有一个网站,其内容和一个导航栏(看起来像三个标签)的div。我在页面上也有JQuery。这就是JQuery所做的事情......当你点击其中一个选项卡时,它应该淡出整个div,改变div的内容以与选中的选项卡相对应(这是通过ajax命中外部页面),最后再次淡入div。jquery fadeout/fadeIn在IE中不工作

我的问题是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> 
+0

是否有你滚,而不是使用jQueryUI的标签自己的标签解决方案特殊的原因? – Ender 2010-10-05 15:16:32

回答

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

    }); 
}); 
+0

真棒,男人......谢谢!这工作完美! – RyanPitts 2010-10-05 16:50:48

1

我的猜测是,自己是不是在IE排队工作。尝试把淡入呼叫到淡出回调,例如:

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

这可以防止制造,直至淡出完成,淡入电话。这应该是自动完成的,但是,它然后,它 IE ...