jQuery淡入淡出內容

Question

如何讓內容部分在導航點擊時淡入淡出？ 然後我如何讓一個特殊的頁面加載到頁面？

代碼：

$(document).ready(function(){ 
    $("a").click(function(e){ 
    e.preventDefault();  
    $('#content').children('section').hide();  
    $('#' + $(this).attr('href')).show(); 
    }); 
}); 

Answer 1

您可以使用.fadeIn（）和.fadeOut（）來做到這一點

$(document).ready(function() { 
    $("a").click(function (e) { 
     e.preventDefault(); 

     //use .stop() so that the animation queue is cleared 
     //show the elemet with the given href as the id 
     var $target = $('#' + $(this).attr('href')).stop(true, true); 

     //hide all sections under #content except the current section 
     var $secs = $('#content > section').not($target).stop(true, true).filter(':visible'); 
     if ($secs.length) { 
      $secs.fadeOut(function() { 
       $target.fadeIn(); 
      }); 
     } else { 
      $target.fadeIn(); 
     } 
    }); 
    $('#content > section').not('#home').hide() 
}); 

Answer 2

你必須fadeout的元素，然後再fadeIn目標元素後達到你想要的效果。

嘗試，

$(document).ready(function(){ 

    $('#content').children('section').not('#home').hide(); 

    $("a").click(function(e){ 
    e.preventDefault();  
    $('#content').children('section').stop().fadeOut();  
    $('#' + $(this).attr('href')).stop().fadeIn(); 
    }); 
});