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

jQuery淡入并淡出内容

2 个答案: