PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน method delay() ใน jQuery 1.4

01 February 2010 By


 .delay()
ใช้สำหรับหน่วงเวลาในการเรียกใช้งานฟังก์ชันที่อยู่ในลำดับ queue

รูปแบบการใช้งาน
.delay( duration, [ queueName ] ) 
ค่าในปีกกาสี่เหลี่ยมเป็นตัวเลือกเพิ่มเติมหรือ option  จะกำหนดค่าหรือไม่กำหนดก็ได้
duration คือ เวลาสำหรับการหน่วง โดย 1000 เท่ากับ 1 วินาที ค่ายิ่งมากหมายถึงการเรียกใช้ฟังก์ชั่นถัดไปจะยิ่งช้าลง 
 
สามารถกำหนดเป็นข้อความ fast (มีค่าเท่ากับ 200) หรือ slow (มีค่าเท่ากับ 600) 
queueName คือ ข้อความที่แสดงชื่อของ queue หากไม่กำหนด ค่าเริ่มต้นจะเป็น fx

CSS code ตัวอย่าง

<style type="text/css">
div#DivA,div#DivB{
	display:block;
	position:relative;
	width:50px;
	height:50px;
}
div#DivA{
	background-color:#CC99FF;
}
div#DivB{
	background-color:#FFCC33;
}
</style>

HTML code ตัวอย่าง

<div id="DivA">Div A</div>
<div id="DivB">Div B</div>
<input type="button" name="testIT" id="testIT" value="Test" />

jQuery code ตัวอย่าง

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input#testIT").click(function(){
		$("div#DivA").animate({left:'300px'},1200).delay(600).animate({left:0},1200);
		$("div#DivB").animate({left:'300px'},1200).animate({left:0},1200);
	});
});
</script>

ตัวอย่าง

คำธิบายตัวอย่าง
divA และ divB มีการเคลื่อนไหวเกิดขึ้นสองช่วง
ช่วงที่ 1 divA และ divB เคลื่อนออกจากด้านซ้ายเดิมเท่ากับ 300 pixels ภายในเวลา 1200 มิลลิวินาทีหรือ 1 วินาที่ 200 มิลลิวินาที
ช่วงที่ 2 divA และ divB จะเคลื่อนกลับมายังตำแหน่งเดิมภายในเวลา 1200 มิลลิวินาทีหรือ 1 วินาที่ 200 มิลลิวินาทีเท่าเดิม
 
แต่กรณีความแตกต่างของ divA เมื่อมีการเรียกใช้ method .delay() จะทำให้การเคลื่อนไหวใน ช่วงที่ 2 ของ divA ช้ากว่าของ divB เท่ากับจำนวนเวลาที่กำหนด จากตัวอย่่าง เท่ากับ 600 มิลลิวินาที
 

Tags:: jqury delay





URL สำหรับอ้างอิง