JQuery delay()
JQuery delay()
JQuery delay()方法用于延迟队列中函数的执行。这是在排队的JQuery效果之间进行延迟的最佳方法。 JQuery delay()方法设置一个计时器来延迟队列中下一项的执行。
语法:
$(selector).delay (speed, queueName)
speed: 这是一个可选参数。它指定延迟的速度。可能的值是慢，快和毫秒。
queueName : 它也是可选参数。它指定队列的名称。它的默认值为标准队列效果" fx"。
让我们以一个示例来查看延迟效果:
<!DOCTYPE html>
<html>
<head>
<script src="/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>点击我</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="/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>此示例为delay()方法设置了不同的速度值。</p>
<button>单击以淡入具有不同延迟时间的框中</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()方法设置了不同的速度值。