jQuery淡入淡出内容答案

【问题标题】：jQuery fade in and fade out the contentjQuery淡入淡出内容
【发布时间】：2013-12-15 12:02:50
【问题描述】：

如何让内容部分在导航点击时淡入淡出？然后我怎样才能让一个特殊的页面在加入页面时加载？

代码：

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

【问题讨论】：

标签： jquery css menu navigation fade

【解决方案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();
  });
});

【讨论】：

谢谢你，我用了你的东西，现在就像我做的那样，我认为这很棒..但是我怎么能做到这一点，其中一个页面是在加载可见的页面而不是全部（在另一个答案的评论中观看链接！）

【解决方案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()
});

【讨论】：

谢谢，查看链接：link 但如果我将页面更改为在 ld 下，然后它会移动..你知道我的意思吗？我该如何解决？
要先淡出元素再显示下一个
这很棒..但是我怎么能做到这一点，其中一个页面是在加载页面可见而不是全部
在链接处观看...所有内容在第一次加载时都列出来..然后点击导航后那里只有 1 个标题..我该怎么做才能让家是单独显示的在加载而不是全部？
@Tekkzz 你想隐藏除 home 之外的所有部分吗？我刚刚更新了它。