cari

Rumah >hujung hadapan web >tutorial js >jquery delay() pengenalan dan panduan penggunaan_jquery

jquery delay() pengenalan dan panduan penggunaan_jquery

WBOY
WBOYasal
2016-05-16 16:37:581244semak imbas

kelewatan(tempoh,[Nama gilir])

Tetapkan kelewatan untuk menangguhkan pelaksanaan item berikutnya dalam baris gilir.
Baru dalam jQuery 1.4. Digunakan untuk menangguhkan pelaksanaan fungsi dalam baris gilir. Ia boleh sama ada menangguhkan pelaksanaan baris gilir animasi atau digunakan dalam baris gilir tersuai.

tempoh: masa tunda, unit: milisaat

Nama giliran: kata nama baris gilir, lalai ialah Fx, baris gilir animasi.

Parameter Penerangan
kelajuan Pilihan. Menentukan kelajuan kelewatan.
参数 描述
speed 可选。规定延迟的速度。

可能的值：

  • 毫秒
  • "slow"
  • "fast"
queueName 可选。规定队列的名称。

默认是 "fx"，标准效果队列。
Nilai yang mungkin:
  • Millisaat
  • "perlahan"
  • "cepat"
Nama giliran Pilihan. Menentukan nama baris gilir. 
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
Lalai ialah "fx", baris gilir kesan standard. 

<!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>
Kod ujian penuh:

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

 $('#footer')
 .css({ 'bottom':-15 })
 .delay(1000)
 .animate({'bottom': 0}, 800); 
});
Kesan animasi pemuatan tertangguh kepala dan bawah

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery merealisasikan menu navigasi pusat peribadi, yang sangat berkesan dan beautiful_jqueryArtikel seterusnya：jquery merealisasikan menu navigasi pusat peribadi, yang sangat berkesan dan beautiful_jquery

Artikel berkaitan

Lihat lagi