2010-10-05 111 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 ...