Given a div element, the task is to hide the div element after a few seconds using jQuery.
Approach:
- Select the div element.
- Use delay function (setTimeOut(), delay()) to provide the delay to hide() the div element.
Example 1: In this example, the setTimeOut() method is used to provide a delay to the fadeOut() method.
html
<!DOCTYPE HTML><html>
<head>
<title>
How to hide div element after
few seconds in jQuery ?
</title>
<script src=
</script>
<style>
#div {
background: green;
height: 100px;
width: 200px;
margin: 0 auto;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
Click on button to hide
div after 1 sec
</h2>
<div id="div">
This is Div box.
</div>
<br>
<button onClick="myFunc()">
Click Here
</button>
<h2 id="GFG"></h2>
<script>
function myFunc() {
setTimeout(function () {
$('#div').fadeOut('fast');
}, 1000);
$('#GFG').text("Div hides after 1 second.");
}
</script>
</body>
</html>
|
Output:
Example 2: In this example, the delay() method is used to provide delay to the fadeOut() method.
html
<!DOCTYPE HTML><html>
<head>
<title>
How to hide div element after
few seconds in jQuery ?
</title>
<script src=
</script>
<style>
#div {
background: green;
height: 100px;
width: 200px;
margin: 0 auto;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
Click on button to hide div after 1 sec
</h2>
<div id="div">
This is Div box.
</div>
<br>
<button onClick="myFunc()">
Click Here
</button>
<h2 id="GFG"></h2>
<script>
function myFunc() {
$("#div").delay(1000).fadeOut(500);
$('#GFG').text("Div hides after 1 second.");
}
</script>
</body>
</html>
|
Output: