淡入淡出效果的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的）

回答

相關問題