JQuery – delay() Method


What is the jquery delay() method?

JQuery inbuilt delay() method is used to delay the execution of functions in the queue.

The delay() method manages the execution of functions between the queued list.

This fixes the time for executing the next queued functions.

What is the syntax of delay() ?

$(selector).delay(speed,queueName)

selector – this is the html element.

delay() – inbuilt jquery method

There are 2 optional params for delay() method.

1. speed

2. queueName

1. speed

        This defines the speed of the show element.


        Possible values are “milliseconds”,”slow”,”fast”.

2. queueName

This defines the name of the queue.


By default its value is “fx” (standard queue effect).

Jquery tutorial for beginners !!!

Click to Learn More about – online learn jquery

1. delay() method is called.

Example :

<!DOCTYPE html>
<html>

	<head>
		<title>Our title</title>
		<style>
		#dId-1{
			width: 30%;
			height: 30%;
			text-align:center;
			padding: 20px;
			margin: 10px;
			border: 2px solid green;
			font-size: 20px;
		}
		#dId-2{
			width: 30%;
			height: 30%;
			margin: 10px;
			border: 2px solid green;
			padding: 20px;
			font-size: 20px;
		}
		.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
			width:150px;
			height:30px;
			font-size: 20px;
		}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
		</script>
		<script>
			$(document).ready(function(){

				$(".b1").click(function(){
					$(".p1").delay("Fast").fadeIn();
				});
				$(".b2").click(function(){
					$(".p2").delay("slow").fadeIn();
                                });
				$(".b3").click(function(){
					$(".p3").delay(1000).fadeIn();
				});
				$(".b4").click(function(){
					$(".p4").delay(3000).fadeIn();
				});
				$(".b5").click(function(){
					$(".p5").delay(6000).fadeIn();
				});
			});
		</script>
	</head>
	<body>
		<div id="dId-1">
			<p class="p1">This is Paragraph1 P1</p>
			<p class="p2">This is Paragraph2 P2</p>
			<p class="p3">This is Paragraph3 P3</p>
			<p class="p4">This is Paragraph4 P4</p>
			<p class="p5">This is Paragraph5 P5</p>
		</div>
		<div id="dId-2">
			<p>
			<button class="b1">Delay</button> Shows P1 "Fast"
			</p>
			<p>
			<button class="b2">Delay</button> Shows P2 "Slow"
			</p>
			<p>
			<button class="b3">Delay</button> Shows P3 in 1000 milliseconds
			</p>
			<p>
			<button class="b4">Delay</button> Shows P4 in 3000 milliseconds
			</p>
			<p>
			<button class="b5">Delay</button> Shows P5 in 6000 milliseconds
			</p>
			<div>
	</body>
</html>

Output :

1. Before applying delay() effect

2. After applying delay() effect insert