开发者

jScrollPane Tabs - How to make them fadein/fadeout?

开发者 https://www.devze.com 2023-02-20 15:15 出处:网络
I managed to get the Vertical jScrollPane with tabs working. How 开发者_Python百科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 d

I managed to get the Vertical jScrollPane with tabs working. How 开发者_Python百科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.


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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号