如何向此添加淡入淡出效果？

Question

我有這樣的jQuery的內容切換器，它只是沒有效果的內容之間進行切換。我希望它有一個簡單的淡入淡出效果。我該如何添加它？

這裏的the fiddle，這裏是jQuery代碼。

$(function(){ 

    function contentSwitcher(settings){ 
     var settings = { 
      contentClass : '.content', 
      navigationId : '#navigation' 
     }; 

     //Hide all of the content except the first one on the nav 
     $(settings.contentClass).not(':first').hide(); 
     $(settings.navigationId).find('li:first').addClass('active'); 

     //onClick set the active state, 
     //hide the content panels and show the correct one 
     $(settings.navigationId).find('a').click(function(e){ 
      var contentToShow = $(this).attr('href'); 
      contentToShow = $(contentToShow); 

      //dissable normal link behaviour 
      e.preventDefault(); 

      //set the proper active class for active state css 
      $(settings.navigationId).find('li').removeClass('active'); 
      $(this).parent('li').addClass('active'); 

      //hide the old content and show the new 
      $(settings.contentClass).hide(); 
      contentToShow.show(); 
     }); 
    } 
    contentSwitcher(); 
}); 

Answer 1

替換此：

//hide the old content and show the new 
    $(settings.contentClass).hide(); 
    contentToShow.show(); 

有了這個：

//hide the old content and show the new 
    $(settings.contentClass).fadeOut(800, function() { 
     contentToShow.fadeIn(800); 
    }); 

的.fadeOut() method接受回調作爲參數 - 它會叫你淡出後提供功能齊全，其是在我看來是適當的時間開始淡化其他內容。

您可以通過提供字符串（"fast"或"slow"）或毫秒數來設置淡入淡出的速度。

演示：http://jsfiddle.net/LjHfZ/8/