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(); 
    }); 
});