How to Fade-In Div in JavaScript?

In the process of designing an attractive and user-friendly web page or a website, fading in and out some specific portion in the DOM makes it(website) stand out and eye-catching. For instance, fading in some important information or content in order to be eye-catching on the user’s end. In such a case, this functionality is very useful in increasing the traffic and ranking the website.

This write-up will provide a guideline to fade-in div in JavaScript.

How to Fade-In Div in JavaScript?

The fade-in div in JavaScript can be done upon the following approaches:

“Button Click”
“Window Load”

The stated approaches will be explained one by one!

Approach 1: Fade-In Div in JavaScript Upon the Button Click

In this approach, the specified image within the “div” will fade-in upon the click of the button with respect to the specified time interval.

The below-given example demonstrates the stated concept.

Example
First, include the “<center>” tag in order to center the specified heading and the “div”. Also, attach an “onclick” event with the div redirecting to the function fade(). The specified image in the next step will fade-in:

<center><h2>This image will fade-in!</h2>
<div id= "fade" onclick= "fade()">
<img src= "template4.PNG">
</div></center>

Next, define the function named “fade()”. In its definition, access the div element using its “id”. After that, initialize the “opacity” with “0.1” and update it with 0.1 with respect to the set time interval(150 milliseconds). A max limit will also be applied on the opacity in order to limit the fade-in for proper display of the “image” within the div:

Output

Approach 2: Fade-In Div in JavaScript Upon the Window Load

This approach can be applied by accessing the specific function as soon as the Document Object Model(DOM) is loaded.

Overview the below-given example for the explained concept.

Example
In this particular example, similarly specify the “div” with the assigned id and fade-in the following heading contained in the div:

<div id= "body">
<br>
<h1 style="color: green;">Welcome to Linuxhint Website</h1>
</div>

Now, similarly initialize the opacity and access the function fade() upon the window load using the “window.onload” event:

var opacity = 0;
window.onload = fade;

After that, declare the function named “fade()”. Here, apply the “setInterval()” method. In its parameter, include the function display() in order to be executed for the specified time interval in milliseconds:

function fade() {
setInterval(display, 500);
}

Finally, define the function named “display()”. In its definition, access the created “div” and similarly increment the opacity value based on the condition for its max limit such that the specified heading in div is faded-in clearly:

function display() {
var body = document.getElementById("body");
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
}
}

The corresponding output will be:

We have compiled the convenient approaches to fade-in div in JavaScript.

Conclusion

Fade-in div in JavaScript can be performed upon the “button click” or when the “DOM is loaded”. The button click approach invokes a function upon the click and fade-in the image with respect to the set time interval. The second approach fade-in the heading within the div in an automated manner as soon as the DOM is loaded. This write-up demonstrated the approaches that can be performed to fade-in div in JavaScript.

How to Fade-In Div in JavaScript?