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