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

01 February 2010

 .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

29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน อ่าน 2700 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 2678 26 Sep 10 การแสดงข้อมูล แนะนำ เส้นทาง ใน google map อ่าน 2617 29 Nov 09 กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย อ่าน 2608 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2571 22 Aug 10 สร้าง waiting page ให้รอสักครู่ ก่อนลิ้งค์ ไปเว็บอื่น ด้วย jQuery และ php อ่าน 2552 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2549 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 2541 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2517 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2513 02 Apr 11 การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่าย อ่าน 2513 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 2502 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2467 25 Sep 08 การกำหนดความกว้างความสูงของ element ด้วยฟังก์ชันของ jQuery อ่าน 2437

บทความคนเข้าอ่านวันนี้

25 Sep 08 ปฏิทินอย่างง่ายด้วย php และ css อ่าน 5051 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 10047 25 Dec 10 แนวทาง การใช้งาน php กับ css กำหนด รูปแบบ style อย่างง่าย อ่าน 1837 30 Nov 10 การนำเสนอ และแสดงข้อมูล ด้วย jQuery Flexigrid Plugin เบื้องต้น อ่าน 4160 05 Nov 08 แสดงป้ายโฆษณา banner แบบสุ่ม random ด้วย ajax อย่างง่าย อ่าน 4305 25 Mar 09 การใช้งานแอดทริบิวท์ autocomplete แบบพื้นฐาน อ่าน 3535 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2467 28 Sep 10 สร้างคำสั่ง สำหรับปุ่มควบคุม กำหนดเอง ใน google map อ่าน 1507 15 Oct 08 สร้าง box แบบสวยงาม ด้วย CSS อ่าน 7550 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 1035 30 Oct 08 กำหนดเวลารอดำเนินการ ด้วย javascript อย่างง่าย อ่าน 2719 25 Sep 08 แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter อ่าน 5398 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 1550 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4126 26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 312 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2353 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2333 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 3034 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3462 25 Mar 11 สร้างรูปแบบ วันที่ คล้าย วันที่ใน facebook comment ด้วย php อย่างง่าย อ่าน 2683
จำนวนผู้เยี่ยมชม 777834
คน 2012 © Copyright ninenik.com. All rights reserved.