jQuery delay()方法用于延迟队列中函数的执行。这是在排队的jQuery效果之间进行延迟的最佳方法。 jQUery delay()方法设置一个计时器来延迟队列中下一项的执行。
句法:
$(selector).delay (speed, queueName)
速度:这是一个可选参数。它指定延迟的速度。其可能的值是慢, 快和毫秒。
【jQuery delay()】queueName:这也是一个可选参数。它指定队列的名称。其默认值为标准队列效果“ fx”。
让我们来看一个延迟效果的例子:
<
!DOCTYPE html>
<
html>
<
head>
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<
/script>
<
script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
});
});
<
/script>
<
/head>
<
body>
<
button>
Click me<
/button>
<
br>
<
div id="div1" style="width:90px;
height:90px;
display:none;
background-color:black;
">
<
/div>
<
br>
<
/body>
<
/html>
立即测试
输出:
点击我
具有不同值的jQuery delay()示例让我们看一个jQuery delay()效果示例, 其中我们使用快速, 慢速和毫秒值。
<
!DOCTYPE html>
<
html>
<
head>
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<
/script>
<
script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("fast").fadeIn();
$("#div2").delay("slow").fadeIn();
$("#div3").delay(1000).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 different delay time<
/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>
立即测试
输出:
本示例为delay()方法设置了不同的速度值。
单击以淡入带有不同延迟时间的框
推荐阅读
- jQuery delegate()
- jQuery css()
- jQuery clone()
- jQuery click()
- jQuery change()
- jQuery blur()
- jQuery before()
- jQuery bind()
- jQuery attr()