วิธี slideUp

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

ไวยากรณ์

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

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

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

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

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

.slideUp();

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

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

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

.slideUp(options);

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

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

ตัวอย่าง

หลังจากกดปุ่ม ให้ซ่อน div หลัก ที่ประกอบด้วยอินพุตและปุ่มอย่างนุ่มนวล โดยใช้เมธอด slideUp (div นี้ เราจะหาโดยใช้เมธอด parent) โดยส่งคำสำคัญ slow เราจะกำหนด ความเร็วเป็น 600ms ใน div กับ #test เราจะแสดงข้อความ 'Text is hidden':

<div>
	<button>ซ่อนข้อความ</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

ดูเพิ่มเติม

เมธอด slideDown,
ซึ่งแสดงองค์ประกอบอย่างนุ่มนวล
เมธอด slideToggle,
ซึ่งสลับการแสดง/ซ่อนองค์ประกอบอย่างนุ่มนวล
เมธอด fadeOut,
ซึ่งซ่อนองค์ประกอบอย่างนุ่มนวล โดยทำให้โปร่งใส
เมธอด hide,
ซึ่งซ่อนองค์ประกอบอย่างนุ่มนวล