effet de fondu onclick (jQuery)

Question

je ce bloc très basique à onglets:

$('.tabbed-section .panel').hide(); 
$('.tabbed-section .panel:first').show(); 
$('.tabbed-section .tabs li:first').addClass('active'); 
$('.tabbed-section .tabs li a').click(function() { 
    $('.tabbed-section .tabs li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    var currentTab = $(this).attr('href'); 
    var tab_id = $(this).attr('href'); 
    $(this).closest('#hero').attr('class', 'clear ' + tab_id.replace('#', '')); 
    $('.tabbed-section .panel').hide(); 
    $(currentTab).show(); 
    return false; 
}); 

.. il fonctionne très bien, mais je peux ajouter un effet fondu lorsque l'onglet change actif? Je pense qu'il y a un plugin (innerfade) pour ça mais je veux éviter d'utiliser un autre plugin si possible.

De plus, le jQuery ci-dessus peut-il être compacté davantage?

Merci pour votre aide!

Answer 1

Au lieu de

$('.tabbed-section .panel').hide(); 
$(currentTab).show(); 

do

$('.tabbed-section .panel').fadeOut(); 
$(currentTab).fadeIn(); 

?

Answer 2

Que pensez-vous de cela?

$('.tabbed-section') 
    .find('.panel').hide().end() 
    .find('.panel:first').show().end() 
    .find('.tabs li:first').addClass('active').end() 
    .find('.tabs li a').click(function() { 
    var el = $(this); 
    $('.tabbed-section .tabs li').removeClass('active'); 
    el.parent().addClass('active'); 
    var currentTab = el.attr('href'); 
    el.closest('#hero').attr('class', 'clear ' + currentTab.replace('#', '')); 
    $('.tabbed-section .panel').fadeOut('fast', function() { 
     $(currentTab).fadeIn('fast'); 
    }); 
    return false; 
    });