โพสต์นี้จะอธิบายการใช้งานจริงของเมธอด fadeOut() ของ jQuery เพื่อสร้างเอฟเฟกต์เฟดเอาท์ที่ราบรื่น
วิธีสร้างเอฟเฟ็กต์ Fade-Out ที่ราบรื่นโดยใช้เมธอด fadeOut() ของ jQuery
jQuery ของ “ จางหายไป() ” วิธีการจะซ่อนองค์ประกอบที่เลือกโดยค่อยๆ ลดความทึบลง วิธีการนี้จะเปลี่ยนสถานะขององค์ประกอบที่เลือกจากมองเห็นเป็นซ่อนอยู่ องค์ประกอบที่ซ่อนอยู่จะไม่แสดงบนหน้าเว็บจนกว่าผู้ใช้จะแสดงอีกครั้งโดยใช้ปุ่ม “ จางหายไป() ' วิธี.
ไวยากรณ์
$ ( ตัวเลือก ) . จางหายไป ( ความเร็ว, ผ่อนคลาย, โทรกลับ ) ;
ไวยากรณ์ด้านบนรองรับพารามิเตอร์ทางเลือกต่อไปนี้เพื่อปรับแต่งเอฟเฟกต์การเฟดเอาท์:
- ความเร็ว: โดยจะระบุความเร็วของเอฟเฟ็กต์การซีดจางในหน่วยมิลลิวินาที โดยค่าเริ่มต้นค่าของมันคือ '400ms' นอกจากนี้ยังรองรับค่าในตัวสองค่าคือ 'ช้า' และ 'เร็ว'
- ผ่อนคลาย: มันแสดงความเร็วของแอนิเมชั่นที่จางลง ณ จุดต่างๆ โดยค่าเริ่มต้น ค่าของมันคือ “แกว่ง (ช้ากว่าที่จุดเริ่มต้น/สิ้นสุด และช้าที่ตรงกลาง)” นอกจากนี้ยังใช้งานได้กับ 'เชิงเส้น (ความเร็วคงที่ในแอนิเมชั่นการซีดจาง)'
- โทรกลับ: โดยจะกำหนดฟังก์ชันที่ผู้ใช้กำหนดซึ่งดำเนินการหลังจากเสร็จสิ้นภาพเคลื่อนไหวที่จางลงเพื่อทำงานที่กำหนด
ลองใช้วิธีที่กำหนดไว้ข้างต้นในทางปฏิบัติ
รหัส HTML
ก่อนที่จะใช้เมธอด 'fadeOut()' ให้ดูโค้ด HTML ต่อไปนี้ที่สร้างองค์ประกอบ 'div' ตัวอย่างซึ่งจะใช้เอฟเฟกต์เฟดเอาท์:
< ปุ่ม > จางหายไป ( ซ่อน องค์ประกอบ ) ปุ่ม >< พี่ชาย >< พี่ชาย >< รหัสดิวิชั่น = 'มายดิฟ' สไตล์ = 'ความสูง: 80px; ความกว้าง: 300px; เส้นขอบ: 2px สีดำทึบ; ระยะขอบ: อัตโนมัติ; การจัดแนวข้อความ: กึ่งกลาง' >
< h2 > ยินดีต้อนรับสู่ Linuxhint h2 >
กอง >
ในบรรทัดโค้ดด้านบน:
- “ <ปุ่ม> แท็ก” เพิ่มองค์ประกอบปุ่ม
- “ แท็ก ' สร้างองค์ประกอบ div ที่มีรหัส 'myDiv' และจัดสไตล์ด้วยความช่วยเหลือของคุณสมบัติการจัดรูปแบบต่อไปนี้ (ความสูง ความกว้าง เส้นขอบ ระยะขอบ การจัดแนวข้อความ)
- ภายใน div นั้น “ แท็ก ” ระบุองค์ประกอบส่วนหัวย่อยแรกของระดับ 2
ตอนนี้ เริ่มต้นด้วยตัวอย่างแรก
ตัวอย่างที่ 1: สร้างเอฟเฟ็กต์เฟดเอาท์ที่ราบรื่นด้วยค่าเริ่มต้น fadeOut()
ตัวอย่างแรกซ่อนองค์ประกอบ div ที่ตรงกันโดยใช้วิธี 'fadeOut()' โดยมีค่าเริ่มต้นเป็น '400ms':
< สคริปต์ >
$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #myDiv' ) . จางหายไป ( ) ;
} ) ;
} ) ;
สคริปต์ >ในบรรทัดโค้ดด้านบน:
- ประการแรก “ พร้อม() ” วิธีการรันฟังก์ชันที่กำหนดเมื่อมีการโหลดเอกสาร HTML/DOM ปัจจุบัน
- ต่อไป “ คลิก() ” วิธีการดำเนินการฟังก์ชันที่เชื่อมโยงเมื่อคลิกปุ่มเมื่อมีการคลิกปุ่มตัวเลือกที่เกี่ยวข้อง
- หลังจากนั้น “ จางหายไป() ” วิธีการซ่อนองค์ประกอบ div ที่เข้าถึงซึ่งมีรหัสเป็น “myDiv” ใน 400ms นั่นคือค่าเริ่มต้น
เอาท์พุต
สังเกตว่าการคลิกปุ่มที่กำหนดจะค่อยๆ จางหายไปจากองค์ประกอบ div ใน “400ms”
ตัวอย่างที่ 2: สร้างเอฟเฟกต์ Fade-Out ที่ราบรื่นด้วยพารามิเตอร์ fadeOut() “speed”
ตัวอย่างนี้ใช้เมธอด 'fadeOut()' ที่มีค่าในตัว (ช้า/เร็ว) ของพารามิเตอร์ 'speed':
< สคริปต์ >
$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #myDiv' ) . จางหายไป ( 'ช้า' ) ;
} ) ;
} ) ;
สคริปต์ >ตอนนี้ “ จางหายไป() ” วิธีการผ่าน “ ช้า ” เป็นพารามิเตอร์เพื่อสร้างเอฟเฟกต์การซีดจางได้อย่างราบรื่น เช่น เปลี่ยนสถานะองค์ประกอบ div ที่เลือกจากมองเห็นเป็นซ่อนอยู่
เอาท์พุต
จะเห็นได้ว่าองค์ประกอบ div ที่เลือกจะซ่อนช้าๆ เมื่อคลิกปุ่ม
ตัวอย่างที่ 3: สร้างเอฟเฟ็กต์เฟดเอาท์ที่ราบรื่นด้วยพารามิเตอร์ fadeOut() “duration”
ตัวอย่างนี้ใช้เมธอด 'fadeOut()' ที่ไม่มีค่ามิลลิวินาทีเป็นพารามิเตอร์ระยะเวลา:
< สคริปต์ >
$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #myDiv' ) . จางหายไป ( 6000 ) ;
} ) ;
} ) ;
สคริปต์ >ตอนนี้เมธอด 'fadeOut()' จะใช้จำนวนมิลลิวินาทีที่ระบุเพื่อซ่อนองค์ประกอบที่ตรงกันในช่วงเวลาที่กำหนด
เอาท์พุต
ผลลัพธ์ด้านบนจะซ่อนการเปลี่ยนแปลงองค์ประกอบ div ที่กำหนดเมื่อคลิกปุ่มในช่วงเวลาที่กำหนด
ตัวอย่างที่ 4: สร้างเอฟเฟ็กต์เฟดเอาท์ที่ราบรื่นด้วยฟังก์ชัน fadeOut() “callback”
ตัวอย่างนี้เรียกใช้ฟังก์ชันการโทรกลับเมื่อเสร็จสิ้นเอฟเฟกต์เฟดเอาท์ผ่านเมธอด 'fadeOut()':
< สคริปต์ >
$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #myDiv' ) . จางหายไป ( 4000 , การทำงาน ( ) {
คอนโซล บันทึก ( 'องค์ประกอบ div ที่กำหนดถูกซ่อนสำเร็จ!' )
} ) ;
} ) ;
} ) ;
สคริปต์ >ในบล็อคโค้ดที่ระบุ:
- “ จางหายไป() ” วิธีการจางหายไปองค์ประกอบ div ที่ตรงกันในเวลาไม่ระบุมิลลิวินาทีจากนั้นจึงดำเนินการฟังก์ชัน 'โทรกลับ' ที่ให้มา
- ข้างใน ' โทรกลับ ” ฟังก์ชัน “ console.log() ” ใช้เพื่อแสดงคำสั่งที่ระบุหลังจากเอฟเฟกต์ 'เฟดเอาท์' เสร็จสิ้น
เอาท์พุต
จะเห็นได้ว่า “คอนโซล” แสดงคำสั่งที่กำหนดไว้ในฟังก์ชันการโทรกลับหลังจากซ่อนองค์ประกอบ div ที่กำหนด
ตัวอย่างที่ 5: สร้างเอฟเฟกต์ Fade-Out ที่ราบรื่นด้วยพารามิเตอร์ fadeOut() “easing”
ตัวอย่างนี้ใช้เมธอด 'fadeOut()' กับค่าที่เป็นไปได้ของพารามิเตอร์ 'easing'
< สคริปต์ >
$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( 'ปุ่ม' ) . คลิก ( การทำงาน ( ) {
$ ( #myDiv' ) . จางหายไป ( 4000 , 'เชิงเส้น' ) ;
} ) ;
} ) ;
สคริปต์ >ตอนนี้ “ จางหายไป() ” วิธีการดำเนินการเอฟเฟกต์เฟดเอาท์ในเวลาไม่ระบุมิลลิวินาทีด้วยความเร็วคงที่เนื่องจาก ' เชิงเส้น ' ค่า.
เอาท์พุต
ผลลัพธ์จะเปลี่ยนสถานะองค์ประกอบที่กำหนดจากมองเห็นเป็นซ่อนด้วยความเร็วคงที่ นั่นเป็นเพียงการใช้เอฟเฟกต์ 'เฟดเอาท์' กับองค์ประกอบ
บทสรุป
เพื่อสร้างเอฟเฟ็กต์เฟดเอาท์ที่ราบรื่นโดยใช้ “ จางหายไป() ” ผู้ใช้ไม่ต้องการพารามิเตอร์เพิ่มเติมใดๆ วิธีการนี้จะค่อยๆ หายไป เช่น ค่อยๆ ซ่อนองค์ประกอบโดยการเปลี่ยนความทึบ หากผู้ใช้จำเป็นต้องแสดงเอฟเฟกต์การซีดจางภายในเวลาไม่กี่มิลลิวินาที ให้ใช้ฟังก์ชันเรียกกลับ จากนั้นใช้พารามิเตอร์ 'ความเร็ว' 'การค่อยๆ เปลี่ยน' และ 'การเรียกกลับ' ด้วยเมธอด 'fadeOut()' โพสต์นี้อธิบายวิธีการ fadeOut() ของ jQuery ได้จริงสำหรับการสร้างเอฟเฟกต์การเฟดเอาท์ที่ราบรื่น