Fade effect onclick (jQuery)
- by Nimbuz
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!
