jQuery를 슬라이드/페이드 기능

Question

나는이 조각을 수정하기 위해 노력하고있어 :

$(document).ready(function(){ 
$('.showscript').show(); 
    $("div.content:not(.about)").hide(); 

    $(".subnav a, .mainnav a").click(function(){ 
     //remove possible hilights 
     $(".subnav a, .mainnav a").removeClass("active"); 

     var href = $(this).attr("href"); 

     //hilight the clicked link 
     $('a[href="'+href+'"]').addClass("active"); 

     //hide possible shown content 
     $(".content").hide(); 

     //show my content 
     $("div.content:has(a[name='" + href.replace("#","") + "'])").show(); 
    }); 
}); 

그래서 a를 .subnav에서 링크 나 .mainnav가 클릭 할 때 그것이하고있어 스왑을 애니메이트. jQuery의 fadeIn/Out을 사용하고 싶습니다. 그러나이 방법을 어떻게 적용 할 수 있을지 잘 모르겠습니다. 이 스크립트는 mainnav 및 subnav에서 내용을 표시하고 둘 중 하나를 클릭 할 때 둘 다에서 활성 클래스를 변경하는 데 매우 특이합니다. http://banderdash.net/design

을하지만 고르지에 많은 느낌 :

당신은 내가 여기에 무슨 뜻인지 알 수 있습니다.

콘텐츠를 빠르게 사라지게하고 새로운 콘텐츠를 빠르게 사라지게하는 것 외에도 창을 콘텐츠 영역으로 슬라이드 시키길 원합니다. 이런 식으로 호출 한 후

<a name="work"> 

과 : 난 그냥 같이 앵커를 사용하고

아래까지가 할 수있는 창을 이동하지만, 검은 색의 내용이 아니기 때문에

<a href="#work"> 

항상 맨 위의 공백을 볼 수있는 범위 밖으로 이동시킬 수있는 Y 평면을 만들기에 충분합니다. 그래서 슬라이드가 훨씬 잘 작동한다고 생각합니다. 클릭시 href의 값을 아래로 내리라고 어떻게 말할 수 있습니까?

Answer 1

먼저 앵커 이름을 사용하지 않았습니다. 콘텐츠의 하위 인 div에 해당 ID를 만들 수 있습니다. 그렇게하면 복잡한 표현에 대한 실제적인 선택을 할 필요가 없습니다. 단지 콘텐츠 내에서 div를 검색하는 것뿐입니다. 두 번째로 이것은 각 div를 개별적으로 움직일 수있게합니다. 나는 당신에게 가장 통제력을 줄 것이라고 생각한다. 마지막으로 false를 반환해야합니다. 그렇지 않으면 클릭 핸들러에서 정상적인 "점프"유형 기능을 수행합니다. 내 스크립트는 다음과 같이 보일 수 있습니다

내용 : 당신의 onready의

<div class="content"> 
    <div id="about"> ... </div> 
    <div id="work"> ... </div> 
    <div id="education"> ... </div> 
    </div> 

관련 부분 :

$(document).ready(function(){ 
    $(.subnav a, .mainnav a).click(function(){ 
     $(".subnav a, .mainnav a").removeClass("active"); 
     var selector = $(this).attr('href'); 

     $('a[href="'+selector+'"]').addClass("active"); 

     if($(selector, '.content').length > 0){ 
     $('> :visible', '.content').slideUp('fast', function(){ 
      $(this).fadeOut('fast', function(){ 
       $(selector, '.content').fadeIn('fast', function(){ 
        $(this).slideDown('fast'); 
       }); 
      }); 
     }); 
     } 
     return false; 
    }); 
}); 

주 & P C 그래서 simpel에만 의사 코드는 수도 또는하지 않을 수 있습니다 작업. 그러나 그것은 당신에게 아이디어를 줄 것입니다.