วิธี slideToggle

วิธี slideToggle แสดงองค์ประกอบที่ซ่อนอยู่อย่างนุ่มนวล และซ่อนองค์ประกอบที่แสดงอยู่

ไวยากรณ์

แสดง/ซ่อนภายในระยะเวลาที่กำหนด, ค่าเริ่มต้นคือ 400ms:

javascript.slideToggle(ระยะเวลา);

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

javascript.slideToggle('slow' หรือ 'fast');

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

javascript.slideToggle();

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

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

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

javascript.slideToggle(options);

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

javascript.slideToggle( {duration: 600, easing: easeInSine} );

ตัวอย่าง

มาลองซ่อน div หลักซึ่งบรรจุย่อหน้า อย่างนุ่มนวลหลังจากกดปุ่ม ด้วยวิธี slideToggle (div นี้ เราจะหาได้ด้วยวิธี parent) หลังจากกดปุ่มอีกครั้ง div จะ ถูกแสดงอย่างนุ่มนวลอีกครั้งและต่อไปเรื่อยๆ โดยการส่งคำสำคัญ slow เราจะกำหนดความเร็วเป็น 600ms:

html<button>toggle text</button>
<div>
  <p id='test'>text text text text text text text</p>
  <p>text text text text text text text</p>
  <p>text text text text text text text</p>
</div>

javascript$('button').click(function() {
  $('#test').parent().slideToggle('slow');
});

ดูเพิ่มเติม