jquery delay（）介紹及使用指南
更新時間：2014年09月02日 11:39:54 投稿：hebedich
.delay()是用來在jQuery動畫效果和類似隊列中是最好的。但是，由于其本身的限制，比如無法取消延時——.delay()，它不是JavaScript的原生 setTimeout函數(shù)的替代品，這可能是更適合某些使用情況。
delay(duration,[queueName])
設(shè)置一個延時來推遲執(zhí)行隊列中之后的項目。
jQuery 1.4新增。用于將隊列中的函數(shù)延時執(zhí)行。他既可以推遲動畫隊列的執(zhí)行，也可以用于自定義隊列。
duration:延時時間，單位：毫秒
queueName:隊列名詞，默認是Fx，動畫隊列。
| 參數(shù) | 描述 |
|---|---|
| speed | 可選。規(guī)定延遲的速度。
可能的值：
|
| queueName | 可選。規(guī)定隊列的名稱。 默認是 "fx"，標(biāo)準(zhǔn)效果隊列。 |
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
完整測試代碼：
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).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 delay</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>
例：
頭部與底部延遲加載動畫效果
$(document).ready(function() {
$('#header')
.css({ 'top':-50 })
.delay(1000)
.animate({'top': 0}, 800);
$('#footer')
.css({ 'bottom':-15 })
.delay(1000)
.animate({'bottom': 0}, 800);
});
您可能感興趣的文章:
- jQuery $.data()方法使用注意細節(jié)
- 實測jquery data()如何存值
- html5的自定義data-*屬性和jquery的data()方法的使用示例
- Jquery ajaxStart()與ajaxStop()方法(實例講解)
- jQuery中使用data()方法讀取HTML5自定義屬性data-*實例
- 理解jQuery stop()方法
- jQuery中data()方法用法實例
- jQuery中removeData()方法用法實例
- jquery中animate的stop()方法作用實例分析
- 逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)
相關(guān)文章
這篇文章主要為大家介紹了jQuery中DOM 屬性使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢功能示例
本文為大家介紹下jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢，具體的實現(xiàn)過程感興趣的朋友可以了解下哈，希望對大家有所幫助2013-06-06
jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例
本篇文章主要是對jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript的jQuery庫中function的存在和參數(shù)問題
這篇文章主要介紹了JavaScript的jQuery庫中function的存在和參數(shù)問題,包括function的參數(shù)傳遞和檢測一個jQuery方法是否存在等,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了jquery實現(xiàn)復(fù)制到粘貼板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery是等待頁面加載完數(shù)據(jù)，以及頁面部分元素；js是頁面全部加載完成才執(zhí)行初始化加載，具體示例祥看本文2014-04-04
這篇文章主要介紹了jquery實現(xiàn)彈出層效果的方法,實例分析了jQuery實現(xiàn)彈出層的技巧,涉及jQuery操作頁面元素與樣式的技巧,需要的朋友可以參考下2015-05-05
使用Ajax和Jquery配合數(shù)據(jù)庫實現(xiàn)下拉框的二級聯(lián)動的示例
下面小編就為大家分享一篇使用Ajax和Jquery配合數(shù)據(jù)庫實現(xiàn)下拉框的二級聯(lián)動的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了基于JQuery實現(xiàn)頁面定時彈出廣告,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
查看源碼的工具 學(xué)習(xí)jQuery源碼不錯的工具
jQuery是一個非常好用的javascript框架，我尤其喜歡它強大的選擇器和鏈?zhǔn)奖磉_式，使得我們能通過簡單的語句實現(xiàn)復(fù)雜的功能。它還有一個重要的特點就是它的可擴展性，使得很多人都可以開發(fā)他們的插件并且分享出來2011-12-12