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