What is the use of delay() method in jQuery ?

Last Updated : 02 Jun, 2023

In this article, we will see how to use the delay() method and why to use it in jQuery. The delay() method is used to set a timer to delay the execution of the next item in the queue.

Syntax:

$(selector).delay(para1, para2);

In the below example, first, we create a div of size 250px X 200px and set its display property to none. Also, created a button that will call the delay() method. When the user clicks on the button, the delay() method and fadeIn() method are called. The delay() method takes a 2000ms value which means the div will display after 2000ms.

Example: In this example, we are using the delay() method.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <!-- Including jQuery -->
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        div {
            width: 250px;
            height: 200px;
            display: none;
            background-color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            What is the use of delay() 
            method in jQuery?
        </h3>
        <div></div>
        <br>
        <button id="delay">delay() method</button>
    </center>
    <script>
        $(document).ready(function() {
            $('#delay').click(function() {
                $('div').delay(2000).fadeIn();
            });
        });
    </script>
</body>
</html>