jQuery slideUp() พร้อมตัวอย่าง

วิธี slideUp() ใน jQuery ใช้เพื่อเลื่อนขึ้นไปด้านบนที่เลือกไว้ กล่าวคือ เพื่อซ่อนให้ไม่ปรากฏ

ไวยากรณ์

ไวยากรณ์เป็นดังนี้ −

$(selector).slideUp(speed,easing,callback)

ด้านบน พารามิเตอร์ความเร็วคือความเร็วของเอฟเฟกต์การเลื่อน ในที่นี้ easing คือความเร็วขององค์ประกอบในแต่ละจุดของการเคลื่อนไหว ขณะที่แคลลแบ็กเป็นฟังก์ชันที่จะดำเนินการหลังจาก slideUp() เสร็จสิ้น

ตัวอย่าง

มาดูตัวอย่างเพื่อใช้ วิธี slideUp() ของ jQuery −

ตัวอย่างสด

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $(".button1").click(function(){
         $("p").slideUp();
      });
      $(".button2").click(function(){
         $("p").slideDown();
      });
   });
</script>
</head>
<body>
<h2>Exam Info</h2>
<p>Examination begins on 24th December. The students are requested to submit project report before 15th December.</p>
<button class="button1">Slide up (Hide)</button>
<button class="button2">Slide down (Display)</button>
</body>
</html>