背景图像上的 Jquery FadeIn/Out 也在淡化它上面的句子答案

【问题标题】：Jquery FadeIn/Out on background image is fading the sentences on top of it too背景图像上的 Jquery FadeIn/Out 也在淡化它上面的句子
【发布时间】：2020-10-08 08:43:17
【问题描述】：

我想淡化不同的背景图像，但它也会影响上面的句子。

这是一个简单的 html 来测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet" />
    <title>Title</title>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <p id="myID">This sentence have a background who should <b> change ! </b><br><br><br><br><br><br><br><br>Yea...</p>
</body>
</html>

我已经完成了一个类，其中包含图像数组、id 和索引，当它淡入/淡出时，它也会淡出文本。 JS：

class changingImageObject {
    constructor(img1, img2, img3, id) {
        this.image = [img1, img2, img3];
        this.id = id;
        this.x = 0;
        this.eraseBg = this.eraseBg.bind(this);
        this.newBg = this.newBg.bind(this);
        this.startTimer = this.startTimer.bind(this);
    };

    newBg() {
        this.x = (this.x === 2) ? 0 : this.x + 1;
        $(this.id).css('background-image', 'url(' + this.image[this.x] + ')');
        $(this.id).fadeIn(1000); //this is new, will fade in smoothly
    };

    eraseBg() {
        $(this.id).fadeOut(1000, this.newBg); //this is new, will fade out smoothly
    };

    startTimer() { //Change image after 3sec (looping)
        setInterval(this.eraseBg, 3000);
    };
}

const test = new changingImageObject("assets/img1.jpeg", "assets/img2.jpeg", "assets/img3.jpeg", '#myID');
test.startTimer();

感谢阅读。

【问题讨论】：

这是预期的行为。每当您使用淡入/淡出更改一个元素的不透明度时，它都会影响其内容（即：子元素）。您应该只使用 CSS 更改来解决问题：Opacity of div's background without affecting contained element in IE 8?
好的，谢谢 melancia Fadin/out 对我想做的事情没有用处，祝你有美好的一天！

标签： javascript html jquery fading

【解决方案1】：

感谢 melancia，我知道我需要使用 rgba 进行漂亮的淡入/淡出，而不会干扰儿童。这是代码：

class changingImageObject {
    constructor(img1, img2, img3, id) {
        this.erasing = false;                           //Boolean
        this.op = 0.0;                                  //Opacité
        this.image = [img1, img2, img3];                //Les images
        this.id = id;                                   //L'id html
        this.x = 0;                                     //L'index
        this.eraseBg = this.eraseBg.bind(this);         //Les methods
        this.newBg = this.newBg.bind(this);             //
        this.startTimer = this.startTimer.bind(this);   //
        this.changeBg = this.changeBg.bind(this);       //
    };

    newBg() {
        if (this.op >= 1) { //If opacity is at 1 then change image and bring the opacity back to 0
            this.erasing = true;
            this.x = (this.x === 2) ? 0 : this.x + 1;
        }
        this.op += 0.01;
    };

    eraseBg() {
        if (this.op <= 0) { //If opacity is at 0 then bring the opacity back to 1
            this.erasing = false;
        }
        this.op -= 0.01;
    };

    changeBg() {
        console.log(this.op);
        if (this.erasing) this.eraseBg(); //If erasing then continue to erase
        else this.newBg();                //If not continue to add opacity
        $(this.id).css('background', 'rgba(0,0,0,' + this.op + ')');
        $(this.id).css('background-image', 'url(' + this.image[this.x] + ')');
    }

    startTimer() { //Change image after 3sec (looping)
        setInterval(this.changeBg, 30);
    };
}

const test = new changingImageObject("assets/img1.jpeg", "assets/img2.jpeg", "assets/img3.jpeg", '#myID');
test.startTimer();

【讨论】：