jQuery delay() Method

Quiz

The jQuery delay() method is used to delay the execution of the next function in the queue for the selected elements. It is often used in conjunction with other jQuery effects to create timed animations.

Syntax

Following is the syntax of jQuery delay() method −

$(selector).delay(speed,queueName)

Parameters

Here is the description of the above syntax −

speed: It specifies the delay in milliseconds before the next function in the queue is executed.
queueName (optional): It specifies the name of the queue. If omitted, the default queue is "fx".

Example

In the following example, we are using the jQuery delay() method along with the fadeIn() method to sequentially display five hidden div elements with different delays when a button is clicked −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#fadeButton").click(function(){
                $("#div1").delay(500).fadeIn();
                $("#div2").delay(2000).fadeIn();
                $("#div3").delay(3500).fadeIn();
                $("#div4").delay(4500).fadeIn();
                $("#div5").delay(6500).fadeIn();
            });
        });
    </script>
    <style>
        .hiddenDiv {
            display: none;
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button id="fadeButton">Fade In Divs</button>
    
    <div id="div1" class="hiddenDiv"></div>
    <div id="div2" class="hiddenDiv"></div>
    <div id="div3" class="hiddenDiv"></div>
    <div id="div4" class="hiddenDiv"></div>
    <div id="div5" class="hiddenDiv"></div>
</body>
</html>

When the button is clicked, each hidden div element fades in sequentially with increasing delays: 500ms, 2000ms, 3500ms, 4500ms, and 6500ms.

jquery_ref_effects.htm

Print Page