search

Home >Web Front-end >JS Tutorial >jquery delay() introduction and usage guide_jquery

jquery delay() introduction and usage guide_jquery

WBOY
WBOYOriginal
2016-05-16 16:37:581215browse

delay(duration,[queueName])

Set a delay to delay execution of subsequent items in the queue.
New in jQuery 1.4. Used to delay the execution of functions in the queue. It can either delay 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.
参数 描述
speed 可选。规定延迟的速度。

可能的值：

  • 毫秒
  • "slow"
  • "fast"
queueName 可选。规定队列的名称。

默认是 "fx"，标准效果队列。
Possible values:
  • Milliseconds
  • "slow"
  • "fast"
queueName Optional. Specifies the name of the queue. 
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
Default is "fx", the standard effects queue. 

<!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(){
  $("#div1").delay("slow").fadeIn();
  $("#div2").delay("fast").fadeIn();
  $("#div3").delay(800).fadeIn();
  $("#div4").delay(2000).fadeIn();
  $("#div5").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>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>
</body>
</html>
Full test code:

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

 $('#footer')
 .css({ 'bottom':-15 })
 .delay(1000)
 .animate({'bottom': 0}, 800); 
});
Head and bottom delayed loading animation effect

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：jquery realizes the personal center navigation menu, which is very effective and beautiful_jqueryNext article：jquery realizes the personal center navigation menu, which is very effective and beautiful_jquery

Related articles

See more