2011-03-27 7 views
0

나는 Vertical jScrollPane with tabs을 사용할 수있었습니다. 어떻게 페이드 인/페이드 아웃을 만들 수 있습니까? 나는 지연과 페이드 인/페이드 아웃을 show()hide()에 추가하려고 시도했지만 작동하지 않거나 탭이 있어야하는 탭을 보여줍니다.jScrollPane 탭 - 페이드 인/페이드 아웃하는 방법?

다음은 수정하려고 시도한 코드입니다. 모든 것은 jscrollpane 사이트의 코드와 동일합니다.

 <script type="text/javascript" id="sourcecode"> 
     $(function() 
     { 
      // Create the "tabs" 
      $('.tabs').each(
       function() 
       { 
        var currentTab, ul = $(this); 
        $(this).find('a').each(
         function(i) 
         { 
          var a = $(this).bind(
           'click', 
           function() 
           { 
            if (currentTab) { 
             ul.find('a.active').removeClass('active'); 
             $(currentTab).hide(); 
            } 
            currentTab = $(this).addClass('active') 
                .attr('href'); 
            $(currentTab).show().jScrollPane(); 
            return false; 
           } 
          ); 
          $(a.attr('href')).hide(); 
         } 
        ); 
       } 
      ); 
     }); 
    </script> 

모든 종류의 도움을 받으실 수 있습니다.

답변

1

어쩌면 이렇게 할 수 있을까요? 페이드하고 싶은게 뭐야? 스크롤 창 또는 탭 상자?

var a = $(this).bind('click',function(){ 
if (currentTab) { 
    ul.find('a.active').removeClass('active'); 
    $(currentTab).fadeOut("slow"); 
} 
currentTab = $(this).addClass('active').attr('href'); 
$(currentTab).fadeIn("slow").jScrollPane(); 
return false; 
}); 

당신은 스크롤 막대를 애니메이션을 적용 할 경우 ... :)

var a = $(this).bind('click',function(){ 
if (currentTab) { 
    ul.find('a.active').removeClass('active'); 
    $(currentTab).fadeOut("slow"); 
} 
currentTab = $(this).addClass('active').attr('href'); 
$(currentTab).fadeIn("slow").jScrollPane(); 
$(".jspVerticalBar").css("opacity", "0"); 
$(".jspVerticalBar").animate({opacity: 1}, 400); 
return false; 
}); 
+0

감사합니다! 하나에서 다른 것으로 전환 할 때 창을 희미하게하고 싶습니다. – Cris

+0

방금 ​​해보았으며 효과가 좋습니다! $ (currentTab) .fadeOut ("slow");를 원래 $ (currentTab) .hide();로 변경했습니다. 왜냐하면 창을 전환 할 때 이전 창은 사라질 때 일시적으로 나타나기 때문입니다. 고맙다! – Cris

+0

스크롤바 애니메이션에 감사드립니다! :디 – Cris

관련 문제