วิธี slideUp

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

ไวยากรณ์

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

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

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

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

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

javascript.slideUp();

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

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

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

javascript.slideUp(options);

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

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

ตัวอย่าง

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

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

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

ดูเพิ่มเติม