srcminijQuery delay()方法用于延迟队列中函数的执行。这是在排队的jQuery效果之间进行延迟的最佳方法。 jQUery delay()方法设置一个计时器来延迟队列中下一项的执行。
句法：
$(selector).delay (speed, queueName)速度：这是一个可选参数。它指定延迟的速度。其可能的值是慢, 快和毫秒。
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()方法设置了不同的速度值。
单击以淡入带有不同延迟时间的框
评论前必须登录！
注册