Home > Article > Web Front-end > jquery delay() introduction and usage guide

jquery delay() introduction and usage guide

巴扎黑Original: 2017-06-30 13:13:392188browse

.delay() is best used in jQuery animation effects and similar queues. However, due to its own limitations, such as the inability to cancel the delay - .delay(), it is not a replacement for JavaScript's native setTimeout function, which may be more suitable for certain use cases.

delay(duration,[queueName])

Set a delay to delay the execution of subsequent items in the queue.
jQuery 1.4New. Used to delay the execution of functions in the queue. It can either postpone the execution of the animation queue or be used in a custom queue.

duration: delay time, unit: milliseconds

queueName: queue noun, the default is Fx, animation queue.

Parameters	Description
speed	Optional. Specifies the speed of the delay. Possible values: Milliseconds "slow" "fast"
queueName	Optional. Specifies the name of the queue. The default is "fx", the standard effects queue.

Parameters

Description

speed

Optional. Specifies the speed of the delay.

Possible values:

Milliseconds
"slow"
"fast"

queueName

Optional. Specifies the name of the queue.

The default is "fx", the standard effects queue.

$("button").click(function(){
$("#p1").delay("slow").fadeIn();
$("#p2").delay("fast").fadeIn();
});

Full test code:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#p1").delay("slow").fadeIn();
  $("#p2").delay("fast").fadeIn();
  $("#p3").delay(800).fadeIn();
  $("#p4").delay(2000).fadeIn();
  $("#p5").delay(4000).fadeIn();
 });
});
</script>
</head>

<body>
<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>
<p id="p1" style="width:90px;height:90px;display:none;background-color:black;"></p><br>
<p id="p2" style="width:90px;height:90px;display:none;background-color:green;"></p><br>
<p id="p3" style="width:90px;height:90px;display:none;background-color:blue;"></p><br>
<p id="p4" style="width:90px;height:90px;display:none;background-color:red;"></p><br>
<p id="p5" style="width:90px;height:90px;display:none;background-color:purple;"></p><br>
</body>
</html>

Example:

Head and bottom delayed loading animation effect

$(document).ready(function() {
 $(&#39;#header&#39;)
 .css({ &#39;top&#39;:-50 })
 .delay(1000)
 .animate({&#39;top&#39;: 0}, 800);

 $(&#39;#footer&#39;)
 .css({ &#39;bottom&#39;:-15 })
 .delay(1000)
 .animate({&#39;bottom&#39;: 0}, 800); 
});

The above is the detailed content of jquery delay() introduction and usage guide. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to jquery delayed execution examplesNext article：Introduction to jquery delayed execution examples

See more

jquery delay() introduction and usage guide

Related articles