jQuery delay() with Examples

jQueryWeb DevelopmentFront End Technology

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 -

raja
Published on 31-Dec-2019 07:15:56
Advertisements