私はjQueryを使用していくつかのタブを作成してきましたが、タブコンテナーのサイズのアニメーションに一貫性がなく、最初の実行では少しジャンプしてタイミングがずれていることを除いて、かなりうまく調和しています。
タブトリガーをクリックすると、現在のタブがフェードアウトし、新しい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();
その微妙なバグですが、その迷惑です。