วิธี toggle

วิธี toggle สลับระหว่างการแสดง/ซ่อนองค์ประกอบอย่างลื่นไหล หากองค์ประกอบถูกแสดงอยู่ มันจะถูกซ่อน และในทางกลับกัน

ไวยากรณ์

แสดงในช่วงเวลาที่กำหนดเป็นมิลลิวินาที, 400ms ตามค่าเริ่มต้น:

.toggle(ระยะเวลา);

สามารถกำหนดเวลาได้ไม่เพียงแต่เป็นมิลลิวินาทีเท่านั้น แต่ยังสามารถใช้คีย์เวิร์ด slow (600ms) และ fast (200ms) ได้อีกด้วย ยิ่งค่ามากเท่าไหร่ การเคลื่อนไหวก็จะช้าลงเท่านั้น:

.toggle('slow' หรือ 'fast');

สามารถส่งค่า true หรือ false ผ่านพารามิเตอร์ display ได้ หากเป็น true องค์ประกอบ จะถูกแสดงเท่านั้น, false - จะถูกซ่อน:

.toggle(display);

หากไม่ระบุพารามิเตอร์ - จะไม่มีการเคลื่อนไหว องค์ประกอบจะถูกแสดง/ซ่อน ทันที:

.toggle();

นอกจากนี้ยังสามารถส่งฟังก์ชัน การผ่อนคลาย (easing function) เป็นพารามิเตอร์ที่สอง และฟังก์ชัน callback เป็นพารามิเตอร์ที่สาม - จะทำงาน หลังจากที่การเคลื่อนไหวเสร็จสิ้น ทั้งสองพารามิเตอร์ไม่จำเป็น:

.toggle(ระยะเวลา, [ฟังก์ชันการผ่อนคลาย], [ฟังก์ชัน callback]);

สามารถส่งฟังก์ชัน callback เป็นพารามิเตอร์ที่สองที่ไม่จำเป็นได้ - จะทำงานหลังจากที่การเคลื่อนไหวเสร็จสิ้น:

.toggle(ระยะเวลา, [ฟังก์ชัน callback]);

สามารถส่งตัวเลือกต่างๆ ให้กับเมธอดได้ ในรูปแบบของวัตถุ JavaScript ที่ประกอบด้วย คู่ คีย์: ค่า:

.toggle(options);

วัตถุดังกล่าวสามารถส่ง พารามิเตอร์และฟังก์ชันต่อไปนี้ - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always รายละเอียด ของพารามิเตอร์เหล่านี้คุณสามารถดูได้จากเมธอด animate ตัวอย่างเช่น กำหนดระยะเวลาและฟังก์ชันการผ่อนคลาย:

.toggle( {duration: 800, easing: easeInSine} );

ตัวอย่าง

มาทดลองให้หลังจากกดปุ่ม จะแสดง ย่อหน้าที่ซ่อนอยู่อย่างลื่นไหลโดยใช้เมธอด toggle โดยการส่ง คีย์เวิร์ด slow เราจะกำหนดความเร็ว เป็น 600ms และเมื่อกดอีกครั้ง - จะซ่อน:

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').toggle('slow');
});

ดูเพิ่มเติม

เมธอด fadeToggle,
ซึ่งเปลี่ยนความโปร่งใสขององค์ประกอบ
เมธอด slideToggle,
ซึ่งสลับระหว่างการแสดง/ซ่อนองค์ประกอบอย่างลื่นไหล
เมธอด show,
ซึ่งแสดงองค์ประกอบอย่างลื่นไหล
เมธอด hide,
ซึ่งซ่อนองค์ประกอบอย่างลื่นไหล