Fadein And Fadeout in JavaScript

Fadein and Fadeout effects are popular web design techniques that make elements on a web page gradually appear or disappear. This JavaScript code provides a simple way to create a “Fadein and Fadeout” effect for HTML elements. It works by gradually changing the opacity of the specified HTML element.

The “Fadein” function increases the opacity until it reaches 1, while the “Fadeout” function decreases the opacity until it reaches 0. These functions are helpful for creating smooth and gradual visibility transitions on web pages.

How to Create Fadein and Fadeout Using JavaScript

1. First, create the HTML structure where you want to apply the Fadein and Fadeout effects. The following code includes a sample HTML structure, which you can customize as needed.

<div class="row center">
    <div>
        <button onclick="faedIn(box_m)" class="btn btn-green">faed in</button>
        <button onclick="faedOut(box_m)" class="btn btn-blue">faed out</button>
    </div>
    <div class="box-f" id="box-f">
        mohammad yazdanpanah
    </div>

</div>

2. You can style your HTML elements using CSS to enhance the visual appeal. In the following code, several CSS classes are defined to style different elements. Feel free to modify these styles to match your website’s design.

.row-f {
    background: #83ffff;
    padding: 20px;
    margin: 20px;
}
.row{
    margin: 50px auto;

}

.string {
    background: #ff3099;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.number {
    background: #12d3ff;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.object {
    background: #0bc69b;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.array {
    background: #5175c6;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.boolean-1 {
    background: #dfc824;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}
.center{
    text-align: center;
}
.btn {
    background: #b3b3b3;
    color: #fff;
    border: 0;
    padding: 10px 30px;
    font-size: 20px;
    cursor: pointer;
}
.btn-blue{
    background: #2eecff;
}
.btn-red{
    background: #da0808;
}
.btn-green{
    background: #62da08;
}
.result {
    margin: 20px auto;
    padding: 20px;
    width: 50%;
    background: #ecfff6;
}      
.box-f {
            background-color: #12d3ff;
            margin: 50px auto;
            padding: 100px 50px;
            width: 50%;
            font-size: 20px;
            color: #ffffff;
        }

3. Finally, add the following JavaScript code to your project. It selects the HTML element with the ID “box-f” and stores it in the variable box_f. You should replace “box-f” with the ID of the element you want to apply the effect to.

var box_m = document.getElementById('box-f');

    function faedIn(elem) {
        var elementattr = Number(getComputedStyle(elem).opacity);

        if (elementattr >= 1) {
            return;
        }
        elem.style.opacity = elementattr + 0.01;
        setTimeout(function () {
            faedIn(elem);
        }, 10);
    }
    function faedOut(elem) {
        var elementattr = Number(getComputedStyle(elem).opacity);

        if (elementattr <= 0) {
            return;
        }
        elem.style.opacity = elementattr - 0.01;
        setTimeout(function () {
            faedOut(elem);
        }, 10);
    }

That’s all! hopefully, you have successfully created Fadein and Fadeout in JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.