변화하는 탭에 페이드를 추가 하시겠습니까?

Question

그래서 일부 콘텐츠에 탭 시스템을 사용하고 있지만 약간 애니메이션을 적용하려고합니다. 그대로, 탭은 정확하게 작동합니다. 탭을 클릭하면 내용이 변경됩니다. 타다! 하지만, 내가 알고 싶은 것은 탭을 팝업으로보기보다는 페이드로 표시하는 것이 가능하고, div의 콘텐츠가 커지거나 줄어들 때 그렇게하는 동안 움직입니다.

이

내가 사용하고있는 코드입니다 :

   $(document).ready(function(){ 
      $('ul.tabs').each(function(){ 
       var $active, $content, $links = $(this).find('a'); 

       $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
       $active.addClass('active'); 
       $content = $($active.attr('href')); 
       $links.not($active).each(function() { 
        $($(this).attr('href')).hide(); 
       }); 

       $(this).on('click', 'a', function(e){ 
        $active.removeClass('active'); 
        $content.hide(); 

        $active = $(this); 
        $content = $($(this).attr('href')); 

        $active.addClass('active'); 
        $content.show(); 

        // Prevent the anchor's default click action 
        e.preventDefault(); 
       }); 
      }); 
     }); 

내가 .removeclass 물건을 페이드 아웃에 대한 내 이전 질문 중 하나를 참조 시도했지만, 그것은 작동하지 않았다. 지금까지 나는 (.addclass에 .fadeIn (500)) 작동 할 것이라고 생각하는 다양한 비트를 추가하려고 시도했지만 결과는 좋지 않았다. 나는 탭을 무작위로 사라지게했고, 탭이 완전히 사라져 버렸고, 내 고양이 중 하나가 던져 버렸습니다. thats 연결되어 있는지, 공정한.

누구든지 여기에 손을 착륙시킬 수 있습니까? 많이 미리 감사드립니다.

Answer 1

nermind, 알아 냈어! 나는 .shade를 사용하여 .fadeIn으로 바꿨다는 것을 알아 차렸다.

  $(document).ready(function(){ 
      $('ul.tabs').each(function(){ 
       var $active, $content, $links = $(this).find('a'); 

       $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
       $active.addClass('active'); 
       $content = $($active.attr('href')); 
       $links.not($active).each(function() { 
        $($(this).attr('href')).hide(); 
       }); 

       $(this).on('click', 'a', function(e){ 
        $active.removeClass('active'); 
        $content.fadeOut(300); 

        $active = $(this); 
        $content = $($(this).attr('href')); 

        $active.addClass('active'); 
        $content.delay(300).fadeIn(500); 

        // Prevent the anchor's default click action 
        e.preventDefault(); 
       }); 
      }); 
     }); 

Woot! 배우기!