Question

Our advert pages her 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的淡入淡出效果like the example here：

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

任何想法都非常感激。

Answer 1

尝试show（）的默认duration parameter并隐藏（）：

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

来自评论：

你得到一个奇怪的褪色效果，因为你有多个容器div（灰色边框和所有）褪色，而在示例中here你有一个灰色背景的容器及其中的所有内容，然后你就会淡化内容。

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

1 个答案: