Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > body text

jquery delay() introduction and usage guide_jquery

WBOY

Release： 2016-05-16 16:37:58

Original

1184 people have browsed it

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

Copy after login

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>

Copy after login

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

Copy after login

Head and bottom delayed loading animation effect

Related labels：

jquery

source：php.cn

Previous article：jquery realizes the personal center navigation menu, which is very effective and beautiful_jquery Next article：Example introduction to the differences between html(), text(), and val() in JQuery_jquery

Statement of this Website

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