เอฟเฟกต์ 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
สำหรับภาพรวมทั้งหมดของเอฟเฟกต์ jQuery โปรดไปที่ jQuery Effect Referenceของเรา