Как добавить к этому вкладке содержимое jQuery?

Question

Как добавить затухание между содержимым с вкладками? Я попытался использовать fadeIn и fadeOut вместо show и hide, но это создает нежелательный результат.

http://codepen.io/saganites/pen/oXPjyG

var tabControls = jQuery('#product-data-tabs-control li'), 
    tabTriggers = tabControls.find('a'), 
    tabs  = jQuery('#product-data-tabs .product-data-tab'), 
    activeClass = 'active-tab'; 

jQuery('#product-data-tabs-control li:first, #product-data-tabs .product-data-tab:first').addClass(activeClass); 

tabs.each(function(){ 
    if(!jQuery(this).hasClass(activeClass)){ 
    jQuery(this).hide(); 
    } 
}); 

tabTriggers.each(function(){ 
    var tab  = jQuery(jQuery(this).attr('href')), 
     parent = jQuery(this).parent(); 
    jQuery(this).click(function(e){ 
    e.preventDefault(); 
    if(!parent.hasClass(activeClass)){ 
     tabControls.removeClass(activeClass); 
     tabs.hide(); 
     parent.addClass(activeClass); 
     tab.show(); 
    } 
    }); 
}); 

Answer 1

Зачем изобретать колесо? jQuery UI уже имеет метод и параметры .tabs(), которые позволяют анимации между вкладками.

Answer 2

Вы можете использовать ".fadeIn('slow')", ".fadeOut('slow')" вместо .show() и .hide() еще мало путаницы? НУ может также использовать .fadeToggle() вместо .show() и .hide()

Как

tab.fadeToggle('slow'); 

Answer 3

Line 24 из ваших Javascript может быть изменен с помощью .animate() на:

tab.show().css("opacity", 0).animate({opacity: 1}, 1000); 

Обновлено CodePen: http://codepen.io/anon/pen/pJOwbB