Question

点击背景更改为图像或颜色。要做到这一点，首先我为身体做了两个课程：

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标签，而是使用高度和宽度均为100％的固定定位<div>，并给出背景颜色，这样您就可以淡出该元素而不是整个元素。 / p>

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

EG。

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

替换（淡化）正文背景而不影响嵌套元素

1 个答案: