Categories
JavaScript Answers

How to do fade-in and fade-out with JavaScript and CSS?

Spread the love

Sometimes, we want to do fade-in and fade-out with JavaScript and CSS.

In this article, we’ll look at how to do fade-in and fade-out with JavaScript and CSS.

How to do fade-in and fade-out with JavaScript and CSS?

To do fade-in and fade-out with JavaScript and CSS, we use the transition CSS property.

For instance, we write

<button id="handle">Fade</button>
<div id="slideSource">Whatever you want here - images or text</div>

to add a button and the div we want to element.

Then we write

#slideSource {
  opacity: 1;
  transition: opacity 1s;
}

#slideSource.fade {
  opacity: 0;
}

to add the transition effects with the transition property.

We animate the opacity between 0 and 1.

Then we write

const slideSource = document.getElementById("slideSource");

document.getElementById("handle").onclick = () => {
  slideSource.classList.toggle("fade");
};

to select the div with getElementById.

And then we select the button and set its onclick property to a function that toggles the fade class to animate the opacity between 1 and 0 and vice versa when we click on it.

Conclusion

To do fade-in and fade-out with JavaScript and CSS, we use the transition CSS property.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.