淡出div然後淡入新div jquery

Question

好的，所以我想淡出我的內容，點擊一個菜單項並淡入新的內容基於href鏈接。 例如：http://www.domain.com/index.php#home 我點擊第2頁 #home淡出然後＃2頁在 http://www.domain.com/index.php#page2

變淡我已經上傳的代碼的jsfiddle。

<> 

http://jsfiddle.net/83GFu/

Answer 1

我在這裏更新您的提琴：http://jsfiddle.net/j45Lf/

更新使用點擊文件準備處理程序，然後使用數據屬性知道顯示/隱藏的頁面。

JS：

$(document).ready(function(){ 
    $(".navlist a").click(function(e){ 
     $(".page").hide(); 

     $("#" + $(this).data("page")).show(); 
    });   
}); 

HTML：

<ul class="navlist"> 
    <li class="litem" name="home"> 
     <a data-page="body_home" href="#body_home">Home</a> 
    </li> 
    <li class="litem" name="hello"> 
     <a data-page="body_hello" href="#body_hello">Hello</a> 
    </li> 
</ul> 

<div id="body_home" class="page" style="display:none;> 
    ... 
</div> 

<div id="body_hello" class="page" style="display: none;"> 
    ... 
</div> 

Answer 2

如果你還沒有注意到這一點尚未$(document).ready()只在頁面加載或刷新頁面解僱。點擊<a>標籤，只向同一頁面上的URL添加片段不會重新加載頁面本身。

因此，您還需要另一個處理程序用於<a>點擊click()事件。

$('.litem a').click(function() { 

    ShowPage($(this).attr('href').substring(1)) 
}); 

function ShowPage(a) { 
    $(".page").css("display", "none");//.hide() will do 
    //don't need to set display, fadeIn already does that 
    $("#body_" + a).fadeIn(1000)//.css("display", "block"); 
    //window.location.hash = "#" + a;, it's not necessary to reset the hash 
    $(".litem").attr("id", ""); 
    $("li[name=" + a + "]").attr("id", "selected") 
} 

Answer 3

你也可以使用.fadeIn（）有一個更漂亮，然後簡單地顯示。

如

$（文件）。就緒（函數（）{$ （ 「navlist一 」）。點擊（函數（E）{ $（「 頁」）。隱藏（ ）;！？

$("#" + $(this).data("page")).fadeIn(); 
});   });