masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

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

jquery delay() pengenalan dan panduan penggunaan_jquery

WBOY

Lepaskan： 2016-05-16 16:37:58

asal

1221 orang telah melayarinya

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();
});

Salin selepas log masuk

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>

Salin selepas log masuk

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); 
});

Salin selepas log masuk

Kesan animasi pemuatan tertangguh kepala dan bawah

Label berkaitan：

jquery

sumber：php.cn

Artikel sebelumnya：jquery merealisasikan menu navigasi pusat peribadi, yang sangat berkesan dan beautiful_jquery Artikel seterusnya：Contoh pengenalan kepada perbezaan antara html(), text(), dan val() dalam JQuery_jquery

Kenyataan Laman Web ini

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 terbaru oleh pengarang