jquery delay（）介紹及使用指南_jquery
- WBOY原創
- 2016-05-16 16:37:581186瀏覽
delay(duration,[queueName])
設定一個延遲來延遲執行佇列中之後的項目。
jQuery 1.4新增。用於將佇列中的函數延時執行。他既可以推遲動畫隊列的執行，也可以用於自訂隊列。
duration:延遲時間，單位：毫秒
queueName:佇列名詞，預設是Fx，動畫佇列。
| 參數 | 描述 | ||||||
|---|---|---|---|---|---|---|---|
| speed | 可選。規定延遲的速度。
|
||||||
| queueName | 可選。規定隊列的名稱。
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
預設是 "fx"，標準效果隊列。 |
<!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);
});
頭部與底部延遲載入動畫效果
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn