jquery delay() introduction and usage guide-JS Tutorial-php.cn

jquery delay() introduction and usage guide

巴扎黑

Release： 2017-06-30 13:13:39

Original

2212 people have browsed it

.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();
});

Copy after login

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>

Copy after login

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); 
});

Copy after login

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!