div를 페이드 아웃하고 새 div를 페이드 인합니다 Jquery

Question

좋아, 그래서 메뉴 항목을 클릭 할 때 내 콘텐트를 페이드 아웃하고 href 링크를 기반으로 새 콘텐트를 페이드하고 싶습니다. 예 : http://www.domain.com/index.php#home 나는 2 페이지를 클릭 #home는 #의 페이지 2 내가 JSFiddle에 코드를 업로드 한 http://www.domain.com/index.php#page2

페이드 인 페이드 아웃.

<> 

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() 만 페이지로드 또는 페이지 새로 고침에 해고 발견하지 않은 경우. 같은 페이지의 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()을 사용하여보다 간단하게 보여줄 수도 있습니다.

예

$ (문서) .ready (함수() { $ (". navlist에"). 기능 (예를 (클릭) { $ (". 페이지"). ​​숨기기 ();!.?!

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