jQuery Animation runs pporly on first event
<p>I've been building some tabs with jQuery and they've cone along pretty well except that the animation of the tab container size is inconsistent, on the first run its a little jumpy and the the timing is off.</p>

<p>When clicking on a tab trigger it should, fade out the current tab, .show the new contnet (with opacity set to 0 so I can get the accurate height) - adjust the container height and fade the opacity in on the active tab.</p>

<p>it works but is buggy on the first click of any of the tabs, once you click on a tab a again it runs perfectly - what am I doing wrong ?</p>

<p>Check out the jsfiddle here for the full code and demo.... <a href="http://jsfiddle.net/pushplaybang/rjS2B/" rel="nofollow">http://jsfiddle.net/pushplaybang/rjS2B/</a></p>

<p>my script looks like this :</p>

<pre><code>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();
</code></pre>

<p>its a subtle bug, but its annoying.</p>
