jQuery อิทธิพล - มีเพียงแค่ช่วงเวลาเดียวโดยเล็นลงและเพิ่มความเข้มข้น

ผ่าน jQuery คุณสามารถทำให้ส่วนที่มองเห็นมีปรากฏและสูญหายได้โดยง่าย

แสดงผล

คลิกที่นี่เพื่อซ่อน/แสดงแผง

เวลาเป็นทองคำ จึงเราให้คุณหาสิ่งที่คุณต้องการโดยรวดเร็วและง่ายต่อตัวเอง

ที่นี่คุณสามารถได้รับความรู้ที่คุณต้องการโดยทางที่ง่ายต่อตัวเอง

ตัวอย่าง

jQuery fadeIn()
แสดงวิธีการใช้ fadeIn() ของ jQuery
jQuery fadeOut()
แสดงวิธีการใช้ fadeOut() ของ jQuery
jQuery fadeToggle()
แสดงวิธีการใช้ fadeToggle() ของ jQuery
jQuery fadeTo()
แสดงวิธีการใช้ fadeTo() ของ jQuery

วิธี Fading ของ jQuery

ผ่าน jQuery คุณสามารถทำให้ส่วนที่มองเห็นมีปรากฏและสูญหายได้โดยง่าย

jQuery มีวิธี fade สี่รูปแบบดังนี้:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() มีความหมายว่าทำให้ส่วนที่ซ่อนอยู่เหลือเพียงแค่ช่วงเวลาเดียวโดยเพิ่มความเข้มข้นและสีของส่วนนั้นจะมีความเข้มข้นขึ้นเรื่อยๆ

jQuery fadeIn() มีความหมายว่าทำให้ส่วนที่ซ่อนอยู่เหลือเพียงแค่ช่วงเวลาเดียวโดยเพิ่มความเข้มข้นและสีของส่วนนั้นจะมีความเข้มข้นขึ้นเรื่อยๆ

รูปแบบการใช้งาน:

$(selector.fadeIn(,,callback);

optional , speed คือตัวเลขที่กำหนดระยะเวลาของการทำงาน โดยสามารถใช้ค่า "slow", "fast" หรือ มิลลิเซ็กันด์

optional callback callback คือชื่อฟังก์ชันที่จะทำงานหลังจากฟังก์ชันเสร็จงาน

ตัวอย่างด้านล่างนี้แสดงว่ามีการใช้ fadeIn() มีเครื่องมือต่างๆ

ตัวอย่าง

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

ทดลองด้วยตัวเอง

jQuery fadeOut() มีความหมายว่าทำให้ส่วนที่มองเห็นเหลือเพียงแค่ช่วงเวลาเดียวโดยเล็นลงและสีของส่วนนั้นจะมีความเข้มข้นลงเรื่อยๆ

jQuery fadeOut() มีความหมายว่าทำให้ส่วนที่มองเห็นเหลือเพียงแค่ช่วงเวลาเดียวโดยเล็นลงและสีของส่วนนั้นจะมีความเข้มข้นลงเรื่อยๆ

รูปแบบการใช้งาน:

$(selector.fadeOut(,,callback);

optional , speed คือตัวเลขที่กำหนดระยะเวลาของการทำงาน โดยสามารถใช้ค่า "slow", "fast" หรือ มิลลิเซ็กันด์

optional callback callback คือชื่อฟังก์ชันที่จะทำงานหลังจากฟังก์ชันเสร็จงาน

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้งาน fadeOut() กับตัวเลขต่างๆ

ตัวอย่าง

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

ทดลองด้วยตัวเอง

jQuery fadeToggle()

jQuery fadeToggle() สามารถเปลี่ยนเป็น fadeIn() หรือ fadeOut() ได้

ถ้าองค์ประกอบที่มีความโปร่งใสแล้ว fadeToggle() จะเพิ่มประสิทธิภาพให้เลื่อนเข้ามา

ถ้าองค์ประกอบที่มีความโปร่งใสแล้ว fadeToggle() จะเพิ่มประสิทธิภาพให้เลื่อนออกไป

รูปแบบการใช้งาน:

$(selector).fadeToggle(,,callback);

optional , speed คือตัวเลขที่กำหนดระยะเวลาของการทำงาน โดยสามารถใช้ค่า "slow", "fast" หรือ มิลลิเซ็กันด์

optional callback callback คือชื่อฟังก์ชันที่จะทำงานหลังจากฟังก์ชันเสร็จงาน

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้งาน fadeToggle() กับตัวเลขต่างๆ

ตัวอย่าง

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

ทดลองด้วยตัวเอง

jQuery fadeTo()

jQuery fadeTo() มีความหมายว่าเลื่อนลงขึ้นหรือขึ้นขึ้นโดยเรียบเรียงที่กำหนดความโปร่งใส (มีค่าระหว่าง 0 ถึง 1)

รูปแบบการใช้งาน:

$(selector).fadeTo(,,opacity,callback);

speed คือตัวเลขที่กำหนดระยะเวลาของการทำงาน โดยสามารถใช้ค่า "slow", "fast" หรือ มิลลิเซ็กันด์

opacity คือตัวเลขที่ต้องการตั้งค่าความโปร่งใสของเลื่อนลงขึ้นหรือขึ้นขึ้น โดยมีขอบเขตคือ 0 ถึง 1

callback คือชื่อฟังก์ชันที่จะทำงานหลังจากฟังก์ชันเสร็จงาน

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้งาน fadeTo() กับตัวเลขต่างๆ

ตัวอย่าง

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

ทดลองด้วยตัวเอง

คู่มืออ้างอิง jQuery อิเล็กทรอนิกส์

หากต้องการดูคู่มือ jQuery อิเล็กทรอนิกส์ทั้งหมด โปรดเข้าเว็บไซต์ของเรา คู่มืออ้างอิง jQuery อิเล็กทรอนิกส์。