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

发布于 2024-08-16 21:56:12 字数 709 浏览 17 评论 0原文

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

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

感谢您的帮助！

原文

I have this very basic tabbed block:

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

.. it works great, but can I add fade effect when the active tab changes? I think there's a plugin (innerfade) for it but I want to avoid using another plugin if possible.

Also, can the jQuery above be compacted further?

Thanks for your help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烙印 2024-08-23 21:56:12

而不是

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

做

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

？

Instead of

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

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

回复收藏 0 原文

星 2024-08-23 21:56:12

这个怎么样？

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

How about this?

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

回复收藏 0 原文

~没有更多了~