jQuery Effects - ซ่อนและแสดง


ซ่อน แสดง สลับ เลื่อน เลือน และเคลื่อนไหว ว้าว!

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

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

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


ตัวอย่าง


สาธิตวิธีการซ่อน jQuery () อย่างง่าย


() การสาธิตการซ่อนอื่น () วิธีซ่อนส่วนต่างๆ ของข้อความ


jQuery ซ่อน () และแสดง ()

ด้วย jQuery คุณสามารถซ่อนและแสดงองค์ประกอบ HTML ด้วยhide()and show()method:

ตัวอย่าง

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

ไวยากรณ์:

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

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

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

พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจาก เมธอด hide()or show()เสร็จสิ้น (คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชันเรียกกลับในบทต่อๆ ไป)

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงพารามิเตอร์ความเร็วด้วยhide():

ตัวอย่าง

$("button").click(function(){
  $("p").hide(1000);
});


สลับ jQuery ()

คุณยังสามารถสลับระหว่างการซ่อนและแสดงองค์ประกอบด้วยtoggle()วิธีการ

องค์ประกอบที่แสดงจะถูกซ่อนและองค์ประกอบที่ซ่อนอยู่จะถูกแสดง:

ตัวอย่าง

$("button").click(function(){
  $("p").toggle();
});

ไวยากรณ์:

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

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

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


แบบฝึกหัด jQuery

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

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

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

$("p").click(function(){
  $(this).();
});


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

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