单击时淡入淡出效果(jQuery)

Question

我有一个非常基本的选项卡块：

$('.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;
});

。。它的效果很好，但我可以添加淡入淡出效果时，活动选项卡改变？我认为它有一个插件(innerfade)，但如果可能的话，我想避免使用其他插件。

另外，上面的jQuery可以进一步压缩吗？

谢谢你的帮忙!

Answer 1

而不是

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

做

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

Answer 2

这个怎么样？

$('.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;
  } );