How to create a javascript and css fade effect

Controlling the css fade effect

In this example we have two buttons which are controlling the fade-in and fade-out effect.

The html code

The html code is very simple.

<div class="box"></div>

<button id="fade-out-trigger">Fade Out</button>
<button id="fade-in-trigger">Fade In</button>

• In line 1 we have a div element with a class of ".box". We are going to use the ".box" class to target the element with javascript.
• In line 3 and 4 we have two buttons. Every button has a unique id. Again we are going to target those buttons with javascript using their id's.

Before we see the javascript code, we have to see the css rules that we apply, to the div element and are important to make the effect to work.

The css code

Let's see what we have in the css code.

.box{
	width:  300px;
	height:  200px;
	background-color: #333;
	transition: opacity .5s;
	margin-bottom: 20px;
}

.box.fade-out{  // .box .fade-out  will not work with space between the two rules.
	opacity: 0;
}

• In line 1 we are targeting the ".box" class to make the div element look like a box.
• In line 5 we add a transition property to the element's opacity, and setting the duration to 0.5 seconds. The transition property will give us the fading animation which will last half a second.
• In line 9 we write a ".fade-out" class rule which we apply to the ".box" class. We are going to manipulate the ".fade-out" class with javascript.
  If you leave a space between the ".box" rule and the ".fade-out" rule the code will not work.
• Inside the ".fade-out" rule we set the opacity to zero. This will make the box invisible, but not instantly because we added the transition property to the ".box" rule.
  This is how we create the css fade effect. Now let's move to the javascript code.

The javascript code

Here is the javascript code.
In here we are going to add and remove the ".fade-out" class to the box element.

let fadeInButton = document.querySelector("#fade-in-trigger");
let fadeOutButton = document.querySelector("#fade-out-trigger");
let box = document.querySelector(".box");

fadeOutButton.onclick = function(){
	box.classList.add("fade-out");
}

fadeInButton.onclick = function(){
	box.classList.remove("fade-out");
}

• In line 1 we target the fade-in button and store the object in the fadeInButton variable.
• We do the same thing with the fade-out button in line 2.
• And again we do the same thing with the box element in line 3.
• In line 5 we add an onclick event-listener to the fade-out button, so every time we click on the button a function will run.
• Inside the function in line 6 we are going to target the box element and add the "fade-out" class.
  This will make the box element to fade-out.
• In line 9 we do the same thing with the fade-in button, but inside the function this time we will remove the "fade-out" class. This will make the box element to fade gradually in.

This example was about how to control the css fade transition with two buttons, one button for the fade-in effect, and the other for the fade-out effect.
Now let's move to the second example to see how we can toggle the css fade effect using a single button.

Toggle the css fade effect

In the second example we are going to have just one button with which we are going to toggle the fade effect.
Try it out.

The html code

Again things here are very simple.

<div class="box"></div>
<button id="toggle">Fade toggle</button>

• We have again the div element with the ".box" class in line 1.
• And in line 2 we have the toggle button that has an id of "toggle".

There are no changes to the css code, so we jump right to the javascript code.

The javascript code

As we did in the first example we are going to add and remove the ".fade-out" class to the box element. Only this time we are going to use an if statement to do so.

let toggle = document.querySelector("#toggle");
let box = document.querySelector(".box");

toggle.onclick = function(){
	if(box.classList.contains("fade-out")){
		box.classList.remove("fade-out");
	}else{
		box.classList.add("fade-out");
	}
}

• In line 1 we are targeting the toggle button and store the element in the toggle variable.
• In line 2 we do the same thing with the box element.
• In line 4 we assign an onclick event-listener to the toggle button, so every time we click on the button a function will run.
• Inside the function we will have an if statement in line 5. The condition will check if the box element has a ".fade-out" class applied. If this is true we will remove the ".fade-out" class in line 6.
• Else, if the box element don't have a ".fade-out" class applied, then we add the class to the element.
• So with this if statement we are going to apply the fade-in and fade-out effect to the box element.

Summary

And that's it, this is how we use css and javascript to add a fade effect to any html element.
I hope i have explained everything correct.

Last words

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code.

Buy me a coffee