Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 28 Sep, 2021

In this article, we will see how to use 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$(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 delay() method. When user click on button, the delay() method and fadeIn() method called. The delay() method take 2000ms value it means the div will display after 2000ms.  

Example:



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="
    </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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!