jScrollPane Tabs - How to make them fadein/fadeout?

Question

I managed to get the Vertical jScrollPane with tabs working. How can I make it fadein/fadeout? I've tried adding a delay and a fadein/fade out to show() and to hide() but it either doesn't work or it shows tabs where there should be.

Here's the code I've tried to modify. Everything is identical with the code on the jscrollpane site.

        <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> 

Any kind of help is appreciated.

Answer 1

Maybe like this? What do you want to fade? The scroll pane or the tabs box?

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;
});

If you want to animate the scrollbar... :)

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;
});