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;">        neveropen    </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;">        neveropen    </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:
… [Trackback]
[…] Find More on that Topic: geeksforgeeks.org/how-to-hide-div-element-after-few-seconds-in-jquery-2/ […]
… [Trackback]
[…] Find More to that Topic: geeksforgeeks.org/how-to-hide-div-element-after-few-seconds-in-jquery-2/ […]