jQuery | delay() with Examples - GeeksforGeeks

13 Feb, 2019
The delay() is an inbuilt method in jQuery which is used to set a timer to delay the execution of the next item in the queue.Syntax:
$(selector).delay(para1, para2);

Parameter: It accepts two parameters which are specified below-
para1: It specifies the speed of the delay.
para2: It is optional and specifies the name of the queue.
Return Value: It returns the selected element with the specified speed.
<html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/                jquery/3.3.1/jquery.min.js"></script>    <script>        <!-- jquery code to demonstrate delay method -->        $(document).ready(function() {            $("button").click(function() {                $("#d1").delay("slow").fadeIn();                $("#d2").delay("fast").fadeIn();                $("#d3").delay(1000).fadeIn();                $("#d4").delay(4000).fadeIn();            });        });    </script></head>  <body>    <!-- click on this button -->    <button>Click Me!</button>    <br>    <br>    <div id="d1" style="width:50px;height:50px;display:                 none;background-color:lightgreen;"></div>    <br>    <div id="d2" style="width:50px;height:50px;display:                 none;background-color:green;"></div>    <br>    <div id="d3" style="width:50px;height:50px;display:                 none;background-color:orange;"></div>    <br>    <div id="d4" style="width:50px;height:50px;display:                 none;background-color:yellow;"></div>    <br></body>  </html>
Output:Before clicking the “Click Me” button-After clicking the “Click Me” button-
Code #2:In the below code, It has been shown that how to delay an animation using this method.
<html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/                jquery/3.3.1/jquery.min.js"></script>    <script>        $(document).ready(function() {        <!-- jQuery code to show the working of delay method -->            $("#btn1").click(function() {                $("div").animate({                    height: "150px"                });                $("div").animate({                    width: "150px"                });                $("div").delay(1200).animate({                    width: "300px",                    padding: "30px"                });            });        });    </script>    <style>        #d {            display: block;            width: 200px;            height: 100px;            background-color: green;            font-size: 30px;            padding: 10px;        }    </style></head>  <body>    <div id="d">GeeksforGeeks !</div><!--click on this button to show the effect of delay method -->    <p>        <button id="btn1">Click Me!</button>    </p></body>  </html>
Output:Before clicking the “Click Me” button-After clicking the “Click Me” button-
jQuery-Effects
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?