javascript - 替换(淡化)主体背景而不影响嵌套元素

Question

点击背景更改为图像或颜色。为此，首先我为 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();
    });
});

Answer 1

不要将这全部应用到 body 标签，而是使用固定定位的 <div>高度和宽度为 100%，并为其提供背景颜色，这样您就可以淡出该元素而不是整个 .

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

例如。

#bg{
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: red;
}

#bg.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;
}

只需将以下内容放在开始的正文标签之后:

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

这是您更新后的 JS:

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