jQuery UI 탭 : 탭 사이를 전환 할 때 슬라이딩 효과

Question

jquery UI를 사용하고 있습니다. 탭간에 전환 할 때 슬라이딩 콘텐츠 효과를 적용하고 싶습니다. 즉, 탭 내용을 표시하거나 숨길 때 적용합니다. 여기 내거야 DEMO

위의 탐색을 클릭하면 탭 div가 내용과 함께 슬라이드하려는 중입니다. 그래서 탐색 링크 1 # 탭-1 화면의 앞 등

에는 슬라이딩 기능이없는 나는 현재이 스크립트의 내용을 미끄러 것은 : I가 시도했습니다

$(document).ready(function() { 
    $('#tabs').tabs(); 

    $('.sub-nav a').click(function() { 
    $('.sub-nav li a').removeClass('subnav-active'); 
    $(this).addClass('subnav-active'); 
    }); 

}); 

slideToggle뿐 아니라 fading out과 fading in 효과가 있지만 작동하지 못했습니다. 그래서 도움이 필요합니다. 어쨌든, 어딘가에 있어도 자바 스크립트 나 jQuery에서 가장 위대한 사람이 아니기 때문에 큰 도움이 될 것입니다.

Answer 1

jQueryUI에는 효과가 내장되어 있습니다. 자신을 굴릴 필요가 없습니다.

http://jsfiddle.net/isherwood/9jg4r/4/

$('#tabs').tabs({ 
    hide: { 
     effect: "slide", 
     duration: 1000 
    } 
}); 

http://api.jqueryui.com/slide-effect/

여기 쇼와 함께 예입니다 및 효과 숨기기 : 당신이 그 코드의 탭의 내용을 조작하려고 시도하고 어디는 표시되지 않습니다 http://jsfiddle.net/isherwood/9jg4r/5