jQuery Animation 在第一个事件上运行不佳

Question

我一直在用 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();

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

Answer 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/ 它会停止动画，引用活动项目，测试它是否相同并在这种情况下关闭它，并且还会在您单击外部时收听要关闭的内容（实际上这并不完全是您的情况）。