jquery delay（）介紹及使用指南

更新時(shí)間：2014年09月02日 11:39:54 投稿：hebedich

.delay()是用來在jQuery動(dòng)畫效果和類似隊(duì)列中是最好的。但是，由于其本身的限制，比如無法取消延時(shí)——.delay()，它不是JavaScript的原生 setTimeout函數(shù)的替代品，這可能是更適合某些使用情況。

delay(duration,[queueName])

設(shè)置一個(gè)延時(shí)來推遲執(zhí)行隊(duì)列中之后的項(xiàng)目。
jQuery 1.4新增。用于將隊(duì)列中的函數(shù)延時(shí)執(zhí)行。他既可以推遲動(dòng)畫隊(duì)列的執(zhí)行，也可以用于自定義隊(duì)列。

duration:延時(shí)時(shí)間，單位：毫秒

queueName:隊(duì)列名詞，默認(rèn)是Fx，動(dòng)畫隊(duì)列。

參數(shù)	描述
speed	可選。規(guī)定延遲的速度。可能的值：毫秒 "slow" "fast"
queueName	可選。規(guī)定隊(duì)列的名稱。默認(rèn)是 "fx"，標(biāo)準(zhǔn)效果隊(duì)列。

參數(shù)

描述

speed

可選。規(guī)定延遲的速度。

可能的值：

毫秒
"slow"
"fast"

queueName

可選。規(guī)定隊(duì)列的名稱。

默認(rèn)是 "fx"，標(biāo)準(zhǔn)效果隊(duì)列。

$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});

完整測(cè)試代碼：

<!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>

例：

頭部與底部延遲加載動(dòng)畫效果

$(document).ready(function() {
 $('#header')
 .css({ 'top':-50 })
 .delay(1000)
 .animate({'top': 0}, 800);

 $('#footer')
 .css({ 'bottom':-15 })
 .delay(1000)
 .animate({'bottom': 0}, 800); 
});

您可能感興趣的文章:

相關(guān)文章

jQuery中DOM 屬性使用實(shí)例詳解下篇
這篇文章主要為大家介紹了jQuery中DOM 屬性使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂查詢功能示例
本文為大家介紹下jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂查詢，具體的實(shí)現(xiàn)過程感興趣的朋友可以了解下哈，希望對(duì)大家有所幫助
2013-06-06
jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
JavaScript的jQuery庫中function的存在和參數(shù)問題
這篇文章主要介紹了JavaScript的jQuery庫中function的存在和參數(shù)問題,包括function的參數(shù)傳遞和檢測(cè)一個(gè)jQuery方法是否存在等,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)復(fù)制到粘貼板功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)復(fù)制到粘貼板功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jquery跟js初始化加載的多種方法及區(qū)別介紹
jquery是等待頁面加載完數(shù)據(jù)，以及頁面部分元素；js是頁面全部加載完成才執(zhí)行初始化加載，具體示例祥看本文
2014-04-04
jquery實(shí)現(xiàn)彈出層效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出層效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)彈出層的技巧,涉及jQuery操作頁面元素與樣式的技巧,需要的朋友可以參考下
2015-05-05
使用Ajax和Jquery配合數(shù)據(jù)庫實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)的示例
下面小編就為大家分享一篇使用Ajax和Jquery配合數(shù)據(jù)庫實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
基于JQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
查看源碼的工具學(xué)習(xí)jQuery源碼不錯(cuò)的工具
jQuery是一個(gè)非常好用的javascript框架，我尤其喜歡它強(qiáng)大的選擇器和鏈?zhǔn)奖磉_(dá)式，使得我們能通過簡(jiǎn)單的語句實(shí)現(xiàn)復(fù)雜的功能。它還有一個(gè)重要的特點(diǎn)就是它的可擴(kuò)展性，使得很多人都可以開發(fā)他們的插件并且分享出來
2011-12-12