Why are the delay method in JQuery?

Asked 28-Jul-2021
Viewed 468 times

1 Answer


1

jQuery delay()

 Jquery is used to end a task late and if a task is in progress, then it works to stop it for some time. In other words, it is done to start some work late.

Syntax:

$(selector).delay (speed)
$(selector).delay (speed, queueName)

Speed and queueName is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. 

<!DOCTYPE html>

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('#div1').delay().fadeIn();
                $('#div2').delay('slow').fadeIn();
                $('#div3').delay(1000).fadeIn();
                $('#div4').delay(2000).fadeIn();
                $('#div5').delay(500).fadeIn();
            });
        });
    </script>
    <style>
        main {
            display:flex;
        }
        div {
            width: 150px;
            height: 150px;
            display: none;
            padding:10px;
        }
    </style>
</head>
<body>
    <button>Click me</button>
    <main>
        <div id='div1' style='background-color: red;'></div>
    <div id='div2' style='background-color: green;'></div>
    <div id='div3' style='background-color: blue;'></div>
    <div id='div4' style='background-color: pink;'></div>
    <div id='div5' style='background-color: navy;'></div>
    </main>
</body>
</html>

Why are the delay method in JQuery?