.delay()
ใช้สำหรับหน่วงเวลาในการเรียกใช้งานฟังก์ชันที่อยู่ในลำดับ queue
รูปแบบการใช้งาน
.delay( duration, [ queueName ] )
ค่าในปีกกาสี่เหลี่ยมเป็นตัวเลือกเพิ่มเติมหรือ option จะกำหนดค่าหรือไม่กำหนดก็ได้
duration คือ เวลาสำหรับการหน่วง โดย 1000 เท่ากับ 1 วินาที ค่ายิ่งมากหมายถึงการเรียกใช้ฟังก์ชั่นถัดไปจะยิ่งช้าลง
สามารถกำหนดเป็นข้อความ fast (มีค่าเท่ากับ 200) หรือ slow (มีค่าเท่ากับ 600)
queueName คือ ข้อความที่แสดงชื่อของ queue หากไม่กำหนด ค่าเริ่มต้นจะเป็น fx
CSS code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 ตัวอย่าง
1 2 3 | <div id="DivA">Div A</div><div id="DivB">Div B</div><input type="button" name="testIT" id="testIT" value="Test" /> |
jQuery code ตัวอย่าง
1 2 3 4 5 6 7 8 9 | <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 มิลลิวินาที
