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 เพื่อทำให้องค์ประกอบ <div> จางลง

$("div").();


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

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