淡入淡出效果的onclick（jQuery的）

我有这个很基本的选项卡式块：淡入淡出效果的onclick（jQuery的）

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

感谢您的帮助！

来源

2010-01-04 3zzy

而不是

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

做

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

？

来源

2010-01-04 12:08:51

你可能不想这样做，因为他们都会同时做动画，并且可能会破坏布局，因为他们都可以看到一段时间。最好使用fadeOut，IMO的完成回调。 – rfunduk 2010-01-04 12:11:18

实际上，这很有效，事实上，代码在一瞬间破坏了布局。 – 3zzy 2010-01-04 12:14:41

这个怎么样？

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

来源

2010-01-04 12:08:19 rfunduk

谢谢，它几乎可以工作，只有2件事1）淡入淡出效果混乱了页面上的底部元素一秒钟和2）第3和第4选项卡总是'眨眼'两次，第一次和第二次没有。 – 3zzy 2010-01-04 12:13:11

没错，你没有提供任何标记，所以对我来说实验是不可能的......为了让这看起来正确，你通常需要做的就是实验。如果同时运行动画，不论出于何种原因不打破布局，那么尽一切办法做到这一点。 – rfunduk 2010-01-04 12:26:45

淡入淡出效果的onclick（jQuery的）

回答

相关问题