淡入淡出效果 onclick (jQuery)答案

【问题标题】：Fade effect onclick (jQuery)淡入淡出效果 onclick (jQuery)
【发布时间】：2011-01-01 05:31:50
【问题描述】：

我有这个非常基本的标签块：

$('.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可以进一步压缩吗？

感谢您的帮助！

【问题讨论】：

标签： jquery tabs fade effect minify

【解决方案1】：

这个怎么样？

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

【讨论】：

谢谢，它几乎可以工作，只有 2 件事 1) 淡入淡出效果会在一瞬间将页面底部元素弄乱 2) 第 3 和第 4 个选项卡总是“闪烁”两次，第 1 次和第 2 次不要。
好吧，你没有提供任何标记，所以我几乎不可能进行实验......为了让它看起来正确，你通常需要这样做，实验。如果同时运行动画不会因任何原因破坏您的布局，那么一定要这样做。

【解决方案2】：

代替

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

做

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

【讨论】：

您可能不想这样做，因为它们会同时制作动画，并且可能会破坏布局，因为它们都会在一段时间内可见。最好使用fadeOut的完成回调，IMO。
这实际上效果很好，事实上，nduks 代码会在一瞬间破坏布局。