Jquery FadeIn/Out 背景图片上的句子也在褪色

Question

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

这是一个简单的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>

我已经完成了一个 class，其中包含图像数组、id 和索引，当它褪色时 in/out 它也会使文本褪色。杰斯:

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

感谢阅读。

Answer 1

感谢 melancia，我知道我需要使用 rgba 来制作漂亮的褪色效果 in/out 而不会干扰孩子们。这是代码：

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

Jquery FadeIn/Out 背景图片上的句子也在褪色

Jquery FadeIn/Out on background image is fading the sentences on top of it too

html

javascript

jquery

fading