jQuery Effects - จางหาย
ด้วย jQuery คุณสามารถเลือนองค์ประกอบเข้าและออกจากการมองเห็นได้
คลิกเพื่อเฟดเข้า/ออกแผง
เนื่องจากเวลามีค่า เราจึงมอบการเรียนรู้ที่ง่ายและรวดเร็ว
ที่ W3Schools คุณสามารถศึกษาทุกสิ่งที่คุณจำเป็นต้องเรียนรู้ในรูปแบบที่เข้าถึงได้ง่ายและสะดวก
ตัวอย่าง
แสดงให้เห็นถึงวิธีการ jQuery fadeIn()
สาธิตวิธีการ jQuery fadeOut()
สาธิตวิธีการ jQuery fadeToggle()
แสดงให้เห็นถึงวิธีการ jQuery fadeTo()
jQuery Fading Methods
ด้วย jQuery คุณสามารถเลือนองค์ประกอบเข้าและออกจากการมองเห็นได้
jQuery มีวิธีการจางดังต่อไปนี้:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() วิธีการ
วิธี jQuery fadeIn()
ใช้เพื่อจางในองค์ประกอบที่ซ่อนอยู่
ไวยากรณ์:
$(selector).fadeIn(speed,callback);
พารามิเตอร์ความเร็วที่เป็นตัวเลือกระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า" "เร็ว" หรือมิลลิวินาที
พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากการเฟดเสร็จสิ้น
ตัวอย่างต่อไปนี้สาธิตfadeIn()
วิธีการที่มีพารามิเตอร์ต่างกัน:
ตัวอย่าง
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() เมธอด
วิธี jQuery fadeOut()
ใช้เพื่อลบองค์ประกอบที่มองเห็นได้
ไวยากรณ์:
$(selector).fadeOut(speed,callback);
พารามิเตอร์ความเร็วที่เป็นตัวเลือกระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า" "เร็ว" หรือมิลลิวินาที
พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากการเฟดเสร็จสิ้น
ตัวอย่างต่อไปนี้สาธิตfadeOut()
วิธีการที่มีพารามิเตอร์ต่างกัน:
ตัวอย่าง
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() เมธอด
เมธอด jQuery fadeToggle()
จะสลับระหว่าง เมธอด fadeIn()
และfadeOut()
เมธอด
หากองค์ประกอบจางหายไปfadeToggle()
ก็จะจางลง
หากองค์ประกอบจางลงfadeToggle()
ก็จะจางหายไป
ไวยากรณ์:
$(selector).fadeToggle(speed,callback);
พารามิเตอร์ความเร็วที่เป็นตัวเลือกระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า" "เร็ว" หรือมิลลิวินาที
พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากการเฟดเสร็จสิ้น
ตัวอย่างต่อไปนี้สาธิตfadeToggle()
วิธีการที่มีพารามิเตอร์ต่างกัน:
ตัวอย่าง
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() เมธอด
เมธอด jQuery fadeTo()
ยอมให้จางหายไปเป็นความทึบที่กำหนด (ค่าระหว่าง 0 ถึง 1)
ไวยากรณ์:
$(selector).fadeTo(speed,opacity,callback);
พารามิเตอร์ความเร็วที่ต้องการจะระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า", "เร็ว" หรือมิลลิวินาที
พารามิเตอร์ความทึบที่ต้องการในfadeTo()
วิธีการระบุการซีดจางเป็นความทึบที่กำหนด (ค่าระหว่าง 0 ถึง 1)
พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากฟังก์ชันเสร็จสิ้น
ตัวอย่างต่อไปนี้สาธิตfadeTo()
วิธีการที่มีพารามิเตอร์ต่างกัน:
ตัวอย่าง
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
แบบฝึกหัด jQuery
การอ้างอิงเอฟเฟกต์ jQuery
สำหรับภาพรวมทั้งหมดของเอฟเฟกต์ jQuery โปรดไปที่ jQuery Effect Referenceของเรา