เอฟเฟกต์ jQuery - เลื่อน


วิธีการสไลด์ jQuery เลื่อนองค์ประกอบขึ้นและลง

คลิกเพื่อเลื่อนลง/ขึ้นแผง

เนื่องจากเวลามีค่า เราจึงมอบการเรียนรู้ที่ง่ายและรวดเร็ว

ที่ W3Schools คุณสามารถศึกษาทุกสิ่งที่คุณจำเป็นต้องเรียนรู้ในรูปแบบที่เข้าถึงได้ง่ายและสะดวก


ตัวอย่าง


สาธิตวิธีการ jQuery slideDown()


สาธิตวิธีการ jQuery slideUp()


สาธิตวิธีการ jQuery slideToggle()


วิธีการเลื่อน jQuery

ด้วย jQuery คุณสามารถสร้างเอฟเฟกต์แบบเลื่อนบนองค์ประกอบได้

jQuery มีวิธีสไลด์ดังต่อไปนี้:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() เมธอด

วิธี jQuery slideDown()ใช้เพื่อเลื่อนลงองค์ประกอบ

ไวยากรณ์:

$(selector).slideDown(speed,callback);

พารามิเตอร์ความเร็วที่เป็นตัวเลือกระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า", "เร็ว" หรือมิลลิวินาที

พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากการเลื่อนเสร็จสิ้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงslideDown()วิธีการ:

ตัวอย่าง

$("#flip").click(function(){
  $("#panel").slideDown();
});


jQuery slideUp() เมธอด

วิธี jQuery slideUp()ใช้เพื่อเลื่อนองค์ประกอบขึ้น

ไวยากรณ์:

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

พารามิเตอร์ความเร็วที่เป็นตัวเลือกระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า", "เร็ว" หรือมิลลิวินาที

พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากการเลื่อนเสร็จสิ้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงslideUp()วิธีการ:

ตัวอย่าง

$("#flip").click(function(){
  $("#panel").slideUp();
});

jQuery slideToggle() เมธอด

เมธอด jQuery slideToggle()จะสลับระหว่าง เมธอด slideDown()และslideUp() เมธอด

หากองค์ประกอบถูกเลื่อนลงslideToggle()ก็จะเลื่อนขึ้น

หากองค์ประกอบถูกเลื่อนขึ้นslideToggle()ก็จะเลื่อนลง

$(selector).slideToggle(speed,callback);

พารามิเตอร์ความเร็วที่เป็นตัวเลือกสามารถใช้ค่าต่อไปนี้: "ช้า", "เร็ว", มิลลิวินาที

พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากการเลื่อนเสร็จสิ้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงslideToggle()วิธีการ:

ตัวอย่าง

$("#flip").click(function(){
  $("#panel").slideToggle();
});

แบบฝึกหัด jQuery

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ใช้วิธี jQuery เพื่อเลื่อนองค์ประกอบ <div>

$("div").();


การอ้างอิงเอฟเฟกต์ jQuery

สำหรับภาพรวมทั้งหมดของเอฟเฟกต์ jQuery โปรดไปที่ jQuery Effect Referenceของเรา