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

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/