0

我一直在用 jQuery 构建一些选项卡，除了选项卡容器大小的动画不一致，第一次运行时它有点跳动并且时间关闭之外，它们的效果非常好。

单击选项卡触发器时，它应该淡出当前选项卡，.show 新的 contnet（不透明度设置为 0，因此我可以获得准确的高度） - 调整容器高度并在活动选项卡上淡入不透明度。

它可以工作，但是在第一次单击任何选项卡时会出现问题，一旦再次单击选项卡，它就会完美运行-我做错了什么？

在这里查看 jsfiddle 以获得完整的代码和演示...... http://jsfiddle.net/pushplaybang/rjS2B/

我的脚本如下所示：

var tabs = {

trig   : $('nav.tab-triggers'),
content: $('section.tabs-content'),
panels : $('section.tabs-content').children(),

// Kick off
init   : function() {
    $.each(tabs.content,function(index, value) {
         $(value).children(':first').addClass('active').show().children().css('opacity', '1');
        $(value).children().not(':first').children('opacity', '0').end().hide();
    });
    tabs.address([tabs.trig]);
    tabs.address([tabs.content]);
    tabs.trig.on('click', 'a', tabs.display);
},

// assign incremental classes hrefs and id's to containers (grouped by class), triggers, and panels
address: function(obj) {
    // for each obj
    $.each(obj, function(index,value) {
         $.each(obj[index], function(index2,value2) {
            $(value2).addClass('tabs-' + index2);
            var kids = $(value2).children();
            $.each(kids, function(index3, value3) {
                var kid = $(value3);
                // if its parent is a nav element
                if ( kid.parent().is('nav') ) {
                // add href
                    kid.attr('href', '#tab-' + index3);
                } else {
                // add matching ids
                    kid.attr('id', 'tab-' + index3);
                }
            });  // end loop through children elements
        }); // end loop through parent elements
    }); // iteration of passed obj
}, // end address method

display: function (e) {
    var clicked = $(this);
    var link    = clicked.attr('href');
    var target  = clicked.parent().next().children(link);
    var active = clicked.parent().next().children('.active');

    clicked.addClass('active').siblings().removeClass('active');

    active.children().animate({
        opacity : 0
    },180, function() {
        active.removeClass('active').fadeOut(20, function() {
            target.addClass('active').show(0, function() {
                var tabheight = target.outerHeight();
                target.parent().animate({
                    height: tabheight + 40
                },200, function() {
                    target.children().animate({
                        opacity : 1
                    });
                });
            });
        });
    });
    e.preventDefault();
} // end display method

}

tabs.init();

这是一个微妙的错误，但很烦人。

4

1 回答 1

1

你的错误的原因：

  • 在活动选项卡 fadeOut 的完整回调中：
    • 你直接调用target.addClass('active').show但它的children'opacity没有设置为0，导致他们的延迟不透明度动画从当前不透明度到1第一次没有做任何事情
    • =>您可以将这些链式调用插入 target.children().css({opacity: 0}).end().addClass('active').show到.children().css({opacity: 0}).end()只是去孩子们那里并改变他们的不透明度。

你不应该做什么（为了性能和清晰度）：

  • 你调用 show 时延迟为 0，这太糟糕了，因为它会在你想要立即得到结果的地方创建一个动画（是吗？也许 jQuery 1.9 现在做得更好了？）
  • 您每次都检索活动选项卡。一个简单的闭包变量可以引用最后一个活动选项卡
  • 您不会将显示的内容与活动内容进行比较，因此尝试显示活动内容会重新启动动画
  • 不停止当前动画，导致多次点击排队动画

您可能会在这里查看幻灯片切换实现：http: //jsfiddle.net/alexis_tondelier/Gf2dv/ 停止动画，引用活动项目，测试它是否相同并在这种情况下关闭它，还可以收听当您在外部单击时关闭（实际上这并不完全是您的情况）。

于 2013-03-24T12:24:49.230 回答