delay()是jQuery中的内置方法, 用于
一个计时器来延迟队列中下一个项目的执行。
语法如下:
$(selector).delay(para1, para2);
参数:它接受下面指定的两个参数:
- para1:它指定延迟的速度。
- para2:它是可选的, 并指定队列的名称。
jQuery代码显示delay()方法的工作方式:
代码1:
在下面的代码中, 将timer设置为所有块。
<
html >
<
head >
<
script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js">
<
/ script >
<
script >
<
!-- jquery code to demonstrate delay method -->
$(document).ready(function() {
$("button").click(function() {
$("#d1").delay("slow").fadeIn();
$("#d2").delay("fast").fadeIn();
$("#d3").delay(1000).fadeIn();
$("#d4").delay(4000).fadeIn();
});
});
<
/ script >
<
/ head >
<
body >
<
!-- click on this button -->
<
button >
Click Me!<
/ button >
<
br >
<
br >
<
div id = "d1" style="width:50px;
height:50px;
display:
none;
background-color:lightgreen;
">
<
/ div >
<
br >
<
div id = "d2" style="width:50px;
height:50px;
display:
none;
background-color:green;
">
<
/ div >
<
br >
<
div id = "d3" style="width:50px;
height:50px;
display:
none;
background-color:orange;
">
<
/ div >
<
br >
<
div id = "d4" style="width:50px;
height:50px;
display:
none;
background-color:yellow;
">
<
/ div >
<
br >
<
/ body >
<
/ html >
【jQuery delay()用法详细示例介绍】输出如下:
在点击"点击我"按钮之前,
文章图片
点击"点击我"按钮后,
文章图片
代码2:
在下面的代码中, 已显示如何使用此方法延迟动画。
<
html >
<
head >
<
script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js">
<
/ script >
<
script >
$(document).ready(function() {
<
!-- jQuery code to show the working of delay method -->
$("#btn1").click(function() {
$("div").animate({
height: "150px"
});
$("div").animate({
width: "150px"
});
$("div").delay(1200).animate({
width: "300px", padding: "30px"
});
});
});
<
/ script >
<
style >
#d {
display: block;
width: 200px;
height: 100px;
background-color: green;
font-size: 30px;
padding: 10px;
}
<
/ style >
<
/ head >
<
body >
<
div id = "d" >
lsbin !<
/ div >
<
!--click on this button to show the effect of delay method -->
<
p >
<
button id = "btn1" >
Click Me!<
/ button >
<
/ p >
<
/ body >
<
/ html >
输出如下:
在点击"点击我"按钮之前,
文章图片
点击"点击我"按钮后,
文章图片
推荐阅读
- TypeScript中的Hello World示例详细介绍
- Python |包含所有替代元素的列表用法详解
- CSS :lang选择器用法示例
- AngularJS json过滤器用法详细示例
- 计算最大流(Push Relabel算法|S2(算法代码实现))
- 计算最大流(Push Relabel算法|S1(简介和插图))
- AngularJS 表格table用法代码示例
- 算法设计(找到所有零和的三元组)
- 如何使用jQuery更改占位符文本()