Home »
jQuery
jQuery Effects - Delay
jQuery Effects - Delay: Learn about the jQuery delay() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 25, 2022
jQuery delay() Method
By the term delay, it is sensed that it helps to make the execution of any event a little bit late. Therefore, the delay() method of jQuery does the same. Whenever this is declared before any other jQuery effect method, it helps to delay the execution of that particular event for the selected element. It can be used for any sort of effect methods, such as – fadeIn(), hide(), toggle(), etc. It can also be said that the delay() method helps to delay the queue of events using a certain timer which has already been set.
delay() Method Syntax
$('selector').delay(speed, queueName)
The speed here, an optional parameter, indicates the speed of the event that has to be delayed. It can be given as – slow, fast, normal, or in milliseconds – 1000, 2000, etc. The queueName is also an optional parameter that specifies the name of the queue of events used.
Following is the example showing the execution of the delay() method in jQuery. This method has been used to delay the fadeToggle() method used. This helps to delay it by 3 seconds, i.e., 3000 milliseconds.
jQuery delay() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery Effects - Delay</h2>
<p>Click the button to delay the fading of the image.</p>
<button>Delay</button>
<hr>
<img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
</body>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
$('img').delay('3000').fadeToggle();
})
});
</script>
</html>
Output:
