jQuery淡入淡出内容

Question

如何让内容部分在导航单击时淡入淡出？然后我如何在加入页面时加载一个特殊页面？

代码：

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

Answer 1

你必须先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();
  });
});

Answer 2

您可以使用.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()
});