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