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

Question

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

70 views Asked by Giordano Raphael At 18 September 2024 at 07:15

I wanted to make a fading of different background images but it affect the sentences on it too.

Here is a simple html to test :

<!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>

I have done a class, with array of images, id and index and when its fading in/out its fading the text too. 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();

Thx for reading.

Original Q&A

There are 1 answers

**Giordano Raphael** · Accepted Answer · 2020-10-09 09:23:21

Thansk to melancia i know that i need to use the rgba to make a pretty fading in/out without interfering with the childrens. Here is the code :

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

TechQA.

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

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in FADING

Popular Questions

Popular Tags

Trending Questions