Hide an element is an effect widely applied on modern web pages. So, today we will show you how to hide an element after a few seconds using JavaScript. Read on to find out what’s the best way for you.
Hide an element after a few seconds using JavaScript
Here are 4 ways to hide an element after a few seconds by combining HTML/CSS/JS knowledge.
Using display: none and setTimeout()
setTimeout() syntax:
setTimeout(func, delay)
Parameters:
- func: the function will execute after the delay time.
- delay (ms): the delay before the func is executed.
The setTimeout() method is used to schedule the execution of a specified function or code.
Display property allows you to define the appearance of the elements differently from their default settings. And CSS {display: none} is used to hide an element and free up its space.
First, we get the element we want to hide and a button. Then, we assign a function containing the setTimeout() function to the button’s click event. Next, in the setTimeout() function, we pass a function that changes the display property of an element to none. When we click, the function containing setTimeout() will be executed, and we can hide the element after a few seconds as we expected. Look closely at the example below and practice.
index.html:
<body>
<main>
<h1 id="heading">Learn JavaScript Programming at learnshareit.com</h1>
<div>
<a href="#" class="btn">Hide the text after a few seconds</a>
</div>
</main>
<script type="module" src="script.js"></script>
</body> script.js:
const h1 = document.getElementById('heading');
const btn = document.querySelector('.btn');
// hide element after 3s when the button is clicked
btn.addEventListener('click', function () {
setTimeout(function () {
h1.style.display = 'none';
}, 3000);
});The downside of display: none is that the boxes around the hidden element will be changed.
Output:
Using visibility: hidden and setTimeout()
The visibility property in CSS is used to determine an element’s visibility. Different from display: none, the visibility set to hidden hides the element, but that element still takes up space.
So, here is exactly a solution for the downside of display: none. Instead of using display: none, we will use visibility: hidden in order not to affect the surrounding elements. Like this:
script.js:
const h1 = document.getElementById('heading');
const btn = document.querySelector('.btn');
// hide element but still take up space after 3s when the button is clicked
btn.addEventListener('click', function () {
setTimeout(function () {
h1.style.visibility = 'hidden';
}, 3000);
});Output:
Using fadeOut() and setTimeout()
fadeOut(): Hide elements with the fade effect.
fadeOut() syntax:
$(selector).fadeOut(speed,callback)
Parameters:
- speed: the hidden or visible speed (milliseconds or text).
- callback: a function that will be called as soon as the effect completes.
Since fadeOut() is a jQuery method. For this reason, we must import the jQuery library before using it. You can use jQuery’s CDN to import here.
With jQuery, we just write the button selector correctly in parentheses after the $ character, then call the click() function and pass a function containing our setTimeout().
The first parameter of our setTimeout(), we pass a function containing fadeOut() function, the second parameter of our setTimeout(), we pass 3000(3 seconds), and that’s it.
script.js:
$('.btn').click(function () {
setTimeout(() => {
$('#heading').fadeOut('slow');
}, 3000);
});Output:
Using fadeTo() and setTimeout()
fadeTo() syntax:
$(selector).fadeTo(speed,opacity,callback)
Parameters:
- speed: the hidden or visible speed (milliseconds or text).
- opacity: the transparency of the element.
- callback: the function that will be called as soon as the effect completes.
If you don’t want the surrounding elements to be changed, let’s try using fadeTo(). For example:
$('.btn').click(function () {
setTimeout(() => {
$('#heading').fadeTo('slow', 0); // opacity: 0
}, 3000);
});Output:
Summary
In summary, we have shown you 4 ways to hide an element after a few seconds using JavaScript. Practice for yourself and choose the way that works best for you. Hopefully, this article will be helpful to you. Thank you for reading!
Maybe you are interested:
- Override an Element’s !important Styles using JavaScript
- Check if Element’s Style contains CSS property using JavaScript
- Remove CSS Style Property from an Element using JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
