การใช้งาน 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 มิลลิวินาที
บทความคนเข้าอ่านวันนี้
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
