jQuery delay() with Examples


The delay() method in jQuery is used to set a delay to delay the execution of the next item in the queue.

Syntax

The syntax is as follows −

$(selector).delay(speed,queue)

Above, the parameter speed is the speed of delay, whereas the queue is the name of the queue.

Let us now see an example to implement the jQuery delay() method 

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("button").click(function(){
         $(".demo1").delay("slow").fadeIn();
         $(".demo2").delay(500).fadeIn();
      });
   });
</script>
<style>
.demo1 {
   margin:20px;
   width:300px;
   height:100px;
   display:none;
   background-color:red;
}
.demo2 {
   margin:20px;
   width: 300px;
   height:100px;
   display:none;
   background-color:green;
}
</style>
</head>
<body>
<button>Fade</button>
<br><br>
<div class="demo1"></div><br>
<div class="demo2"></div><br>
</body>
</html>

Output

This will produce the following output -

After clicking the Fade button, animation appears slowly since we have set delay -

Updated on: 31-Dec-2019

278 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements