In this article, we will explore how to achieve this functionality on how to add and remove class after 5 seconds in JavaScript.
We all know that JavaScript is a versatile programming language that enables developers to create web pages with interactive and dynamic features.
At the end of this discussion, you will have a clear understanding of how to effortlessly add and remove a class after a 5-second delay using JavaScript.
What is remove method?
The remove() method in JavaScript is an easy way to delete a class.
To remove a class, you just need to specify the element it belongs to. Then, use the remove function from the classList of the selected element.
Syntax
element.classList.remove(className);
How to add a class after 5 seconds in JavaScript?
To add a class after 5 seconds in JavaScript. You can use the setTimeout function to add a class to an element after a specified time interval.
Here’s an example:
setTimeout(function() {
document.getElementById("myElement").classList.add("myClass");
}, 5000);
This code will add the class myClass to the element with the id myElement after 5 seconds (5000 milliseconds).
Here’s the complete example code that illustrates how to add a class to an element after 5 seconds using JavaScript.
<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
color: red;
}
#myElement {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
}
</style>
</head>
<body>
<p id="myElement">Hi, Welcome to Itsourcecode!</p>
<script>
setTimeout(function() {
document.getElementById("myElement").classList.add("myClass");
}, 5000);
</script>
</body>
</html>
As you have noticed in the example code above, the setTimeout function is used to call a function after 5 seconds (5000 milliseconds) that adds the myClass class to the element using the add method of the classList property.
The myClass class changes the color of the text to red.
How to remove class after 5 seconds in JavaScript?
To remove class after 5 seconds in JavaScript. You can use the setTimeout function to remove a class from an element after a specified time interval.
Here’s an example:
setTimeout(function() {
document.getElementById("myElement").classList.remove("myClass");
}, 5000);This code will remove the class myClass from the element with the id myElement after 5 seconds (5000 milliseconds).
Here’s the complete example code that illustrates how to remove a class from an element after 5 seconds using JavaScript.
<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
color: red;
}
#myElement {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
}
</style>
</head>
<body>
<p id="myElement" class="myClass">Hi, Welcome to Itsourcecode!</p>
<script>
setTimeout(function() {
document.getElementById("myElement").classList.remove("myClass");
}, 5000);
</script>
</body>
</html>
In here, you’ll see the p element with the id myElement and the class myClass is added to the page.
The myClass class defines the style of the element, changing its color to red. The #myElement rule centers the element on the page using the position, top, left, and transform properties.
The setTimeout function is used to call a function after 5 seconds (5000 milliseconds) that removes the myClass class from the element using the remove method of the classList property.
This changes the color of the element back to its original value.
Example Code on how to remove class after 5 seconds in JavaScript
To remove a class after 5 seconds in JS, you can also use jQuery’s toggleClass method which changes the color every 5 seconds.
Here’s the example:
<!DOCTYPE html>
<html>
<head>
<style>
.heart {
font-size: 500px;
text-align: center;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: red;
}
.changeColor {
animation: changeColor 5s infinite;
}
@keyframes changeColor {
0% {
color: red;
}
20% {
color: pink;
}
40% {
color: yellow;
}
60% {
color:green;
}
80%{
color: blue;
}
100%{
color:red;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="heart">♥</div>
<script>
$(document).ready(function() {
setInterval(function() {
$(".heart").toggleClass("changeColor");
}, 5000);
});
</script>
</body>
</html>
As you can see, we created an HTML page with a prominent heart symbol at its center, which undergoes a color change every 5 seconds.
The heart class defines the styling for the heart symbol, setting its size to 500px using the font-size property.
To achieve center alignment, properties like text-align, margin, position, top, bottom, left, and right are utilized. Initially, the heart symbol’s color is set to red.
The changeColor class introduces an animation that smoothly transitions the heart symbol’s color. This animation, defined with the @keyframes rule, runs indefinitely for 5 seconds.
It sequentially changes the heart symbol’s color from red to pink, yellow, green, blue, and finally back to red.
The HTML code includes a div element with the heart class, displaying a heart symbol (♥) as its content.
Using JavaScript and jQuery, the code attaches an event listener to trigger when the page finishes loading.
Within this listener, the setInterval function is used to execute a function every 5 seconds (5000 milliseconds).
This function toggles the changeColor class on the heart element using jQuery’s toggleClass method.
As a result, the heart symbol gracefully changes color every 5 seconds.
Here’s the output:
Conclusion
In conclusion, this article provides a detailed explanation, code examples, and demonstrations of how to add and remove a class after a 5-second delay using JavaScript.
It explains the basic syntax and usage of the remove() method to delete a class from an element.
We also demonstrates the use of the setTimeout function to add a class to an element after a specified time interval and remove a class from an element after the same delay.
Additionally, this article provide an alternative approach using jQuery’s toggleClass method for color changes every 5 seconds.
We are hoping that this article provides you with enough information that helps you understand to remove class after 5 seconds JavaScript.
You can also check out the following article:
Thank you for reading itsourcecoders 😊.