โพสต์นี้เน้นความแตกต่างที่สำคัญระหว่าง Hide() และ fadeOut(), show() และ fadeIn() ใน jQuery
ก่อนที่จะพูดถึงความแตกต่างระหว่าง Hide() และ fadeOut(), show() และ fadeIn() ใน jQuery ขั้นแรกให้ดูที่พื้นฐานของวิธีการเหล่านี้โดยอ่านคำแนะนำต่อไปนี้:
- วิธีการ fadeIn() ของ jQuery
- วิธีการ fadeOut() ของ jQuery
- JavaScript JQuery ซ่อน() วิธีการ | อธิบาย
- JQuery แสดง () วิธี | อธิบาย
ขั้นแรก ให้ดูความแตกต่างระหว่างเมธอด Hide() และ fadeOut() ใน jQuery
แยกความแตกต่างระหว่าง Hide() และ fadeOut() ใน jQuery
ข้อแตกต่างหลักประการเดียวระหว่าง “ ซ่อน() ' และ ' จางหายไป() ” วิธีการคือ:
- ช่วงเวลา : “ ซ่อน() ” วิธีการโดยค่าเริ่มต้นจะซ่อนองค์ประกอบโดยเปลี่ยนความทึบขององค์ประกอบจาก 100 เป็น 0 ทันทีโดยไม่ต้องใช้ช่วงเวลาใด ๆ ในขณะที่ ' จางหายไป() ” วิธีการจางหายไป เช่น ซ่อนองค์ประกอบทีละน้อยใน “400ms” ซึ่งเป็นค่าเริ่มต้น
มาดูการใช้งานจริงของความแตกต่างที่ระบุไว้
ขั้นแรกให้ดูที่โค้ด HTML ต่อไปนี้:
< ศูนย์ >< รหัส h2 = 'H2' > ยินดีต้อนรับสู่ Linuxhint ! h2 >
< ปุ่ม > ซ่อนองค์ประกอบ ปุ่ม >
ศูนย์ >
ในบรรทัดโค้ดด้านบน:
- “ <ศูนย์> แท็ก” ปรับการจัดตำแหน่งขององค์ประกอบที่กำหนดตรงกลางหน้าเว็บ
- “ ” สร้างส่วนหัวย่อยระดับ 2 ด้วยรหัส “H2”
- “ <ปุ่ม> แท็ก ” แทรกปุ่มใหม่
บันทึก: ปฏิบัติตามโค้ด HTML ข้างต้นตลอดทั้งคู่มือนี้
ตัวอย่าง: การใช้ jQuery “hide()” วิธีการที่มีค่า “Default”
ตัวอย่างนี้ใช้ “hide()” กับค่าเริ่มต้นเพื่อซ่อนองค์ประกอบ:
< สคริปต์ >$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #H2' ) . ซ่อน ( ) ;
} ) ;
} ) ;
สคริปต์ >
ในบรรทัดโค้ดด้านบน:
- ประการแรก “ พร้อม() ” วิธีการถูกนำมาใช้เพื่อดำเนินการฟังก์ชั่นที่ระบุเมื่อมีการโหลดเอกสาร HTML ปัจจุบัน
- ต่อไป “ คลิก() ” วิธีการมีหน้าที่รับผิดชอบในการดำเนินการฟังก์ชั่นที่เชื่อมโยงเมื่อคลิกปุ่ม
- หลังจากนั้น “ ซ่อน() ” วิธีการซ่อนองค์ประกอบส่วนหัวที่เข้าถึงได้ทันทีซึ่งมีรหัสเป็น “H2”
เอาท์พุต
จะเห็นได้ว่าองค์ประกอบส่วนหัวจะซ่อนทันทีเมื่อคลิกปุ่ม
ตัวอย่าง: การใช้ jQuery “fadeOut()” วิธีการที่มีค่า “Default”
ตัวอย่างนี้ใช้เมธอด 'fadeOut()' พร้อมค่าเริ่มต้นเพื่อค่อยๆ ซ่อนองค์ประกอบที่กำหนดใน '400ms'
ในสถานการณ์สมมตินี้ เนื้อหาขององค์ประกอบ 'ปุ่ม' มีการเปลี่ยนแปลง:
< ปุ่ม > จางหายไป ( ซ่อน องค์ประกอบ ) ปุ่ม >ตอนนี้ใช้เมธอด “fadeOut()” ในลักษณะนี้:
< สคริปต์ >$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #H2' ) . จางหายไป ( ) ;
} ) ;
} ) ;
สคริปต์ >
ในเวลานี้ “ จางหายไป() ” ใช้เมธอดเพื่อทำให้องค์ประกอบส่วนหัวที่เข้าถึงจางหายไปด้วย 400ms เช่นค่าเริ่มต้น
เอาท์พุต
ผลลัพธ์แสดงให้เห็นอย่างชัดเจนว่าการคลิกปุ่มที่กำหนดจะค่อยๆ ซ่อนองค์ประกอบส่วนหัวในช่วงเวลาเริ่มต้น เช่น “400ms”
แยกความแตกต่างระหว่าง show() และ fadeIn() ใน jQuery
เช่นเดียวกับวิธี “hide()” และ “fadeOut()” ความแตกต่างเดียวกันคือระหว่างวิธี “show()” และ “fadeIn()”:
- ช่วงเวลา : “ แสดง() ” โดยค่าเริ่มต้นจะแสดงองค์ประกอบที่ซ่อนอยู่โดยเปลี่ยนความทึบจาก 0 เป็น 100 ทันที ในขณะที่ “ จางหายไป() ” วิธีการแสดงองค์ประกอบที่ซ่อนอยู่ทีละน้อยใน “400ms” ซึ่งเป็นค่าเริ่มต้น
ตัวอย่าง: การใช้ jQuery “show()” วิธีการที่มีค่า “Default”
ตัวอย่างนี้ใช้ “show()” กับค่าเริ่มต้นเพื่อแสดงองค์ประกอบที่ซ่อนอยู่
ขั้นแรกให้ดูที่บล็อกโค้ด HTML ที่ให้มา:
< ศูนย์ >< ปุ่ม > แสดงองค์ประกอบ ปุ่ม >
< รหัส h2 = 'H2' สไตล์ = 'จอแสดงผล: ไม่มี' > ยินดีต้อนรับสู่ Linuxhint ! h2 >
ศูนย์ >
ตามสถานการณ์จำลองนี้ องค์ประกอบส่วนหัวที่กำหนดจะถูกซ่อนไว้ด้วยความช่วยเหลือของ ' จอแสดงผล: ไม่มี ' คุณสมบัติ.
ตอนนี้ ทำตามบล็อกโค้ดที่ให้มาเพื่อทำความเข้าใจการใช้งานจริงของเมธอด “show()”:
< สคริปต์ >$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #H2' ) . แสดง ( ) ;
} ) ;
} ) ;
สคริปต์ >
บล็อกโค้ดข้างต้นใช้ “ แสดง() ” วิธีการแสดงองค์ประกอบที่ซ่อนอยู่ที่เพิ่มเข้ามาทันที
เอาท์พุต
จะเห็นได้ว่าการคลิกปุ่มจะแสดงองค์ประกอบส่วนหัวที่ซ่อนอยู่ทันที
ตัวอย่าง: การใช้ jQuery วิธีการ “fadeIn()” ด้วยค่า “Default”
ตัวอย่างนี้แสดงองค์ประกอบที่ซ่อนอยู่โดยใช้วิธีการ “fadeIn()” ด้วยค่าเริ่มต้น “ 400ms ”:
ข้อความขององค์ประกอบปุ่มมีการเปลี่ยนแปลงตามสถานการณ์ที่กำหนด:
< ปุ่ม > จางหายไปใน ( แสดง องค์ประกอบ ) ปุ่ม >ตอนนี้ใช้ ' จางหายไป() ” วิธีการใช้บล็อกรหัสต่อไปนี้:
< สคริปต์ >$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #H2' ) . จางหายไปใน ( ) ;
} ) ;
} ) ;
สคริปต์ >
ในบล็อคโค้ดนี้ “ จางหายไป() ” วิธีการใช้เพื่อแสดงองค์ประกอบที่ซ่อนอยู่ซึ่งตรงกับรหัส “H2” ใน 400ms เช่นค่าเริ่มต้น
เอาท์พุต
สังเกตได้ว่าการคลิกปุ่มที่กำหนดจะแสดงองค์ประกอบที่ซ่อนอยู่ทีละน้อยในช่วงเวลาเริ่มต้น เช่น “400ms”
บทสรุป
ใน jQuery ข้อแตกต่างที่สำคัญเพียงอย่างเดียวระหว่าง ซ่อน() และ จางหายไป() , แสดง() , และ จางหายไป() วิธีการคือ “ ช่วงเวลา '. เมธอด “show()” และ “hide()” จะดำเนินการฟังก์ชันทันทีตามค่าเริ่มต้น ในขณะที่เมธอด “fadeIn()” และ “fadeOut()” จะดำเนินการตามช่วงเวลาเริ่มต้น เช่น “400ms” โพสต์นี้อธิบายความแตกต่างที่สำคัญระหว่าง Hide() และ fadeOut(), show() และ fadeIn() ใน jQuery ได้จริง