Javascript 替换（淡入）主体背景而不影响嵌套元素

单击后，背景将更改为图像或颜色。为此，我为body开设了两门课程：

body.bg-color {
    background-color:red;
}
body.bg-img {
    background: url(../images/bg.jpg) no-repeat center 0 fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

然后使用.addClass和.removeClass更改背景。事情是，这种方法淡出，除了背景，还有内容。应该怎样做才能淡入/淡出背景

$(document).ready(function(){

$('body').addClass('bg-color');
$('.element,#content1,#content2').hide();

    $("#link1").click(function(){
        $('#wrapper').hide();
        $('body').removeClass('bg-color').fadeOut();    
        $('body').addClass('bg-img').fadeIn();
    });

    $("#link2").click(function(){
        $('#wrapper').show();
        $('body').removeClass('bg-img').fadeOut();
        $('body').addClass('bg-color').fadeIn();
    });
});

---

不要将这些全部应用于主体标记，而是使用高度和宽度为100%的固定位置，并为其提供背景色，这样您就可以淡出该元素而不是整个元素

此外，您可以切换一个类，而不是一次添加和删除两个类

例如

只需将以下内容放在打开的body标记后面即可：

<div id="bg"></div>

---

jetlej，谢谢你的尝试，但是这个方法看起来很难看。。。这里是小提琴的丑陋是由淡出然后淡入造成的。关于如何制作动画只有一次的任何线索？好的，我做了一些更改，现在背景确实会立即更改，除了动画几乎是即时的，即使使用“慢”for.animate。如何使更改变慢？另外，如果经常单击链接，是否有办法消除可见的故障背景会淡入淡出几次。

<div id="bg"></div>

$(document).ready(function(){

    $('.element,#content1,#content2').hide();

    $("#link1").click(function(){
        $('#wrapper').hide();
        $('#bg').fadeOut().addClass('bg-img').fadeIn();
    });

    $("#link2").click(function(){
        $('#wrapper').show();
        $('#bg').fadeOut().removeClass('bg-img').fadeIn();
    });
});