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

Bookmark and Share

 .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 มิลลิวินาที
 



บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 1264 29 Nov 09 กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย อ่าน 1240 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 1226 07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 1206 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 1190 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 1141 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 1114 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 1102 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 1089 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 1008 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 956 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 953 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 927 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 341
จำนวนผู้เยี่ยมชม 157925 คน 2010 © Copyright ninenik.com. All rights reserved.