I need help with JavaScript. I am using the jQuery library. I want to hide a div block in 10 seconds on a button click or page load using jQuery.I know this may be easy with jQuery but I don't know how to hide a div at a specific time duration. I am creating advertise on my website. The advertisement should be removed or hidden under 10 seconds or 5 seconds or 3 seconds.
For example -
<div class="ad">Hide advertise div block in 10 seconds</div>
Is it possible to hide div under 3 seconds or 5 seconds or 10 seconds?
arnabisaha
(2.5K Points)
vishalrana
(3.5K Points)
It can be more complex in JavaScript, but you can easily hide a div in 10 seconds using the jQuery library. I was searching for the same solution and got the best solution. You can use the jQuery setTimeout() method and hide() method to hide a div block in 10 seconds, 3 seconds, or 5 seconds. In the setTimeout() method, you can set seconds in milliseconds. The hide() will use to hide a div block.
Let's understand with an example -
<!DOCTYPE html>
<html>
<head>
<title>Hide div in 10 seconds on page load in jQuery </title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
setTimeout(function(){
$("#ad").hide();
}, 10000);
</script>
</head>
<body>
<div class="ad" id="ad">Hide advertise div block in 10 seconds, Please wait for 10 seconds</div>
</body>
</html>
Execute the above example and wait for 10 seconds. The advertisement div will be hidden after 10 seconds.
You can set it for 3 seconds, or 5 seconds.
1 second = 1000 milliseconds.
10 seconds = 10000 milliseconds.
3 seconds = 3000 milliseconds.
5 seconds = 5000 milliseconds.
shakti
(9.4K Points)
In the jquery library, there is a method setTimeout(). You can use it to hide a div in 10 seconds, 3 seconds, or 5 seconds from the page. You can use the hide() method to hide a div or the remove() method to remove a div from the page. Instead of this, you can use a CSS stylesheet to hide a div block in just 10, 3, or 5 seconds.
<!DOCTYPE html>
<html>
<head>
<title>Remove a div after page loads in JS jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
setTimeout(function(){
$(".ad").remove();
}, 5000);
</script>
</head>
<body>
<div class="ad">Your ad code. Wait for 5 seconds..</div>
</body>
</html>
You can hide a div using CSS class only using the addClass() method-
<!DOCTYPE html>
<html>
<head>
<title>Hide a div using CSS stylesheet in 10 seconds</title>
<style>
.ad_hide{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
setTimeout(function(){
$(".ad").addClass('ad_hide');
}, 10000);
</script>
</head>
<body>
<div class="ad">Your ad code. Wait for 10 seconds..</div>
</body>
</html>
If you don't want to use the addClass() method then you can use CSS() method to hide a div.
$(".ad").css({'display': 'none'});
You can use one any example to hide any div with an id name and class name in 10 seconds, 3 seconds, or 5 seconds.
Reference -
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
https://api.jquery.com/remove/
