วิธี slideDown

วิธี slideDown แสดงองค์ประกอบที่ซ่อนอยู่ อย่างลื่นไหล โดยเลื่อนลงจากด้านบนลงมาด้านล่าง การซ่อนองค์ประกอบสามารถทำได้โดยใช้วิธี slideUp

ไวยากรณ์

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

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

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

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

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

.slideDown();

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

.slideDown(ระยะเวลา, [ฟังก์ชันความลื่นไหล], [callback function]);

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

.slideDown(options);

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

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

ตัวอย่าง

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

<button>แสดงข้อความ</button>
<p style="display: none">ข้อความ</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('การเคลื่อนไหวเสร็จสิ้น')
	});
});

ดูเพิ่มเติม

วิธี slideUp,
ซึ่งซ่อนองค์ประกอบอย่างลื่นไหล
วิธี slideToggle,
ซึ่งสลับการแสดง/ซ่อนองค์ประกอบอย่างลื่นไหล
วิธี fadeIn,
ซึ่งแสดงองค์ประกอบที่ซ่อนอยู่อย่างลื่นไหล โดยทำให้ไม่โปร่งใส
วิธี show,
ซึ่งแสดงองค์ประกอบอย่างลื่นไหล