Javascript 在jquery中添加淡出选项卡列表

e对选项卡使用以下jscript：

$(window).load(function(){

    $('.tab:not(.aboutus)').hide();

    $('.tabs li').click(function(){
        var thisAd = $(this).parent().parent();
        $(thisAd).children('.tab').hide();
        $(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
        $('.tabs li').removeClass('active');                                                    
        $(this).addClass('active');
    });


    if(window.location.hash) {
        if (window.location.hash == "#map") {
            $(".Advert").children('.tab').hide();
            $(".Advert").children('.map').show();
            $('.tabs li').removeClass('active');                                                    
            $('.maptab').addClass('active');
        }
        if (window.location.hash == "#voucher") {
            $(".Advert").children('.tab').hide();
            $(".Advert").children('.vouchers').show();
        }
    }   

});

我想加入一个淡入淡出的效果，使用这个js：

(function($) {

    $.organicTabs = function(el, options) {

        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");

        base.init = function() {

            base.options = $.extend({},$.organicTabs.defaultOptions, options);

            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 

            base.$nav.delegate("li > a", "click", function() {

                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),

                // List moving to
                    $newList = $(this),

                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),

                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);

                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);

                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });

                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");

                    });

                }   

                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });

        };
        base.init();
    };

    $.organicTabs.defaultOptions = {
        "speed": 300
    };

    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };

})(jQuery);

更新：这些是我需要修改代码以使用的代码片段，但是需要一些帮助才能集成它们：

          // Fade out current list
            base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                // Fade in new list on callback
                base.$el.find("#"+listID).fadeIn(base.options.speed);

非常感谢任何想法。

尝试默认的show（）和hide（）

从评论中：

您会得到一种奇怪的淡入淡出效果，因为您有多个容器div（带灰色边框和all）淡入淡出，而在示例中，您有一个带有灰色背景的容器和其中的所有内容，然后您只淡出内容。

呵呵，不，请阅读文档；）。快速/正常/等只是定义淡入效果速度的不同选项，因此使用hide（“快速”）时，淡入效果将非常快，而使用hide（“慢速”）时，淡入效果将非常缓慢。或者，您可以自己指定淡入淡出持续时间，如.hide（300），这意味着它会在300毫秒内淡出。

.show('fast/normal/slow/[duration in ms]')
.hide('fast/normal/slow/[duration in ms]')