jQuery delay()用法详细示例介绍

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 >

输出如下：
在点击"点击我"按钮之前,