หนึ่ง. แสดงซ่อน
วิธีการแสดงผลใน jQuery คือ:. show () และวิธีที่ซ่อนอยู่คือ: .hide () เมื่อไม่มีพารามิเตอร์มันเป็นเรื่องยากที่จะแสดงและซ่อนเนื้อหา
$ ('. show') คลิก (function () {// ตั้งค่ากิจกรรมทริกเกอร์ $ ('#box'). show (); // show}); $ ('. ซ่อน') คลิก (ฟังก์ชัน () {// ตั้งค่ากิจกรรมทริกเกอร์ $ ('#box'). ซ่อน (); // ซ่อน});ในวิธี. show () และ. hide () สามารถส่งพารามิเตอร์ซึ่งควบคุมความเร็วเป็นมิลลิวินาที (1,000 มิลลิวินาทีเท่ากับ 1 วินาที) นอกจากนี้ยังอุดมไปด้วยความเร็วคงที่เพื่อเพิ่มและลดลงเช่นเดียวกับการเปลี่ยนแปลงความโปร่งใส
$ ('. show') คลิก (function () {$ ('#box') แสดง (1,000); // ใช้เวลา 1 วินาทีในการแสดง}); $ ('. ซ่อน') คลิก (ฟังก์ชัน () {$ ('#box') ซ่อน (1,000); // ใช้เวลา 1 วินาทีในการซ่อน});นอกเหนือจากการใช้มิลลิวินาทีโดยตรงกับความเร็วในการควบคุมแล้ว jQuery ยังมีสตริงพารามิเตอร์ความเร็วที่ตั้งไว้ล่วงหน้าสามสาย: ช้าปกติและรวดเร็วสอดคล้องกับ 600 มิลลิวินาที 400 มิลลิวินาทีและ 200 มิลลิวินาทีตามลำดับ
$ ('#box'). แสดง ('ช้า'); // 600 มิลลิวินาที $ ('#box') แสดง ('ปกติ'); // 400 มิลลิวินาที $ ('#box') แสดง ('เร็ว'); // 200 มิลลิวินาทีหมายเหตุ: ไม่ว่าจะผ่านมิลลิวินาทีหรือผ่านสตริงที่ตั้งไว้ล่วงหน้าหากคุณผ่านข้อผิดพลาดหรือผ่านสตริงเปล่าโดยไม่ตั้งใจ จากนั้นจะใช้ค่าเริ่มต้น: 400 มิลลิวินาที
ใช้ฟังก์ชั่นการโทรกลับของ. show () และ. hide () เพื่อให้ได้เอฟเฟกต์แอนิเมชั่นคิว
(1) โทรด้วยตัวเองโดยใช้ชื่อฟังก์ชั่น
$ ('. show') คลิก (function () {$ ('#box') แสดง ('slow', function showspan () {$ (this) .next (). show ('slow', showspan);});})(2) ใช้อาร์กิวเมนต์ callee เพื่อเรียกฟังก์ชันที่ไม่ระบุชื่อ
$ ('. show') คลิก (function () {$ ('#box') แสดง ('slow', function () {$ (this) .next (). show ('slow', arguments.callee);});})เมื่อเราใช้. show () และ. hhide () ถ้าเราต้องการปุ่มเพื่อสลับเราต้องตัดสินใจตามเงื่อนไข และ jQuery ให้วิธีการแยกต่างหากที่มีฟังก์ชั่นที่คล้ายกัน: .toggle ()
$ ('. สลับ') คลิก (ฟังก์ชัน () {$ (นี่) .toggle ('slow');});สอง. Slide and Scroll jQuery จัดเตรียมชุดของวิธีการเปลี่ยนความสูงขององค์ประกอบ:. slideup (), .slidedown () และ. slidetoggle () เมื่อชื่อมีความหมายให้หดตัวขึ้น (เลื่อน) และขยายลง (สไลด์)
$ ('. down'). คลิก (ฟังก์ชัน () {// ปัดลง $ ('#box'). slidedown ();}); $ ('. up') คลิก (ฟังก์ชั่น () {// ปัด $ ('#box') slideup ();});หมายเหตุ: เอฟเฟกต์การเลื่อนและการเลื่อนนั้นเหมือนกับการแสดงผลและเอฟเฟกต์ที่ซ่อนอยู่และมีพารามิเตอร์เดียวกัน
สาม. จางหายไปจางหายไป
jQuery จัดเตรียมชุดของวิธีการโดยเฉพาะสำหรับการเปลี่ยนแปลงความโปร่งใส: .fadein () และ. fadeout () ซึ่งเป็นตัวแทนของจางหายไปและจางหายไปตามลำดับและแน่นอนว่ายังมีวิธีการสลับอัตโนมัติ: .fadetoggle ()
$ ('. in'). คลิก (function () {// ปลอมใน $ ('#box'). fadein ('slow');}); $ ('. out') คลิก (ฟังก์ชั่น () {// ปลอมออก $ ('#box'). fadeout ('slow');}; -วิธีการโปร่งใสสามวิธีข้างต้นสามารถอยู่ได้ตั้งแต่ 0 ถึง 100 หรือจาก 100 ถึง 0 หากเราต้องการตั้งค่าที่ระบุไม่มีวิธีใด jQuery จัดเตรียมวิธี. fadeto () เพื่อแก้ปัญหานี้
$ ('. สลับ') คลิก (ฟังก์ชั่น () {$ ('#box'). fadeto ('ช้า', 0.33); //0.33 หมายถึงค่าคือ 33%});PS: จำนวนค่าคือ 0 ถึง 1 ซึ่งสอดคล้องกับเปอร์เซ็นต์
สี่. แอนิเมชั่นที่กำหนดเอง
JQuery ให้ภาพเคลื่อนไหวคงที่ที่เรียบง่ายและใช้กันทั่วไปหลายประการที่เราใช้ แต่บางครั้งภาพเคลื่อนไหวง่าย ๆ เหล่านี้ไม่สามารถตอบสนองความต้องการที่ซับซ้อนได้มากขึ้น ในเวลานี้ jQuery มีวิธี. animate () เพื่อสร้างภาพเคลื่อนไหวที่กำหนดเองของเราเพื่อตอบสนองความต้องการที่ซับซ้อนและเปลี่ยนแปลงได้มากขึ้น
$ ('. animate'). คลิก (function () {$ ('#box'). animate ({'width': '300px', 'fontsize': '50px', 'opacity': 0.5});});หมายเหตุ: การเปลี่ยนแปลง CSS เป็นเอฟเฟกต์ภาพเคลื่อนไหว ในตัวอย่างข้างต้นมีการเปลี่ยนแปลง CSS สี่ครั้งแล้วและผลกระทบของการเคลื่อนไหวแบบซิงโครนัสของภาพเคลื่อนไหวหลายภาพได้สำเร็จ
มีเพียงพารามิเตอร์เดียวที่ต้องผ่านซึ่งเป็นวัตถุที่มีรูปแบบ CSS คู่คีย์-ค่า มีพารามิเตอร์เสริมสองตัวคือฟังก์ชั่นความเร็วและการโทรกลับ
$ ('. animate'). คลิก (function () {$ ('#box'). animate ({'width': '500px', 'ความสูง': '400px',}, 2000, ฟังก์ชัน () {Alert ('การดำเนินการเสร็จสมบูรณ์');});});ถึงตอนนี้เราได้สร้างภาพเคลื่อนไหวที่มีตำแหน่งคงที่ที่ยังคงอยู่ หากคุณต้องการใช้ Bit Movement Pictures ในสถานะการเคลื่อนไหวคุณต้องใช้ภาพเคลื่อนไหวที่กำหนดเองและรวมเข้ากับฟังก์ชั่นการวางตำแหน่งที่แน่นอนของ CSS
$ ('. animate'). คลิก (function () {$ ('#box'). animate ({'top': '300px', // การวางตำแหน่งสัมบูรณ์ของ CSS จะต้องตั้งค่าแรก 'ซ้าย': '200px'});});PS: วัตถุอ้างอิงจะต้องตั้งค่าก่อนใน CSS และการวางตำแหน่งสัมบูรณ์
ในแอนิเมชั่นที่กำหนดเองการเคลื่อนไหวเริ่มต้นแต่ละครั้งจะต้องอยู่ในตำแหน่งเริ่มต้นหรือสถานะเริ่มต้นและบางครั้งเราต้องการที่จะเคลื่อนไหวผ่านตำแหน่งหรือสถานะปัจจุบัน jQuery ให้ฟังก์ชั่นการเพิ่มและลดภาพเคลื่อนไหวที่กำหนดเอง
$ ('. animate'). คลิก (function () {$ ('#box'). animate ({ซ้าย: '+= 100px', ความกว้าง: '+= 100px', ความสูง: '+= 100px'});});ห้า. วิธีการอนิเมชั่นคิว
เราสามารถใช้แอนิเมชั่นคิวมาก่อนแล้ว หากเป็นองค์ประกอบเดียวกันก็สามารถเรียกได้ตามลำดับหรือต่อกัน หากเป็นองค์ประกอบที่แตกต่างกันคุณสามารถใช้ฟังก์ชั่นการโทรกลับ แต่บางครั้งมีแอนิเมชั่นคิวมากเกินไปและความสามารถในการอ่านของฟังก์ชั่นการโทรกลับลดลงอย่างมาก ด้วยเหตุนี้ JQuery จึงจัดเตรียมชุดของวิธีการที่ใช้เป็นพิเศษสำหรับแอนิเมชั่นที่เข้าคิว
// เชื่อมต่อไม่สามารถนำไปใช้ในคิวลำดับ
$ ('#box') SlideUp ('slow'). slidedown ('slow'). CSS ('พื้นหลัง', 'สีส้ม');
หมายเหตุ: หากวิธีการเคลื่อนไหวเป็นภาพเคลื่อนไหวสามารถเข้าคิวได้ตามลำดับในขณะที่วิธี. css () ไม่ใช่วิธีการเคลื่อนไหวและจะเป็นก่อนที่คิวจะผ่านไปครั้งแรก จากนั้นฟังก์ชั่นการเรียกกลับวิธีภาพเคลื่อนไหวสามารถใช้เพื่อแก้ปัญหาได้
// ใช้ฟังก์ชั่นการโทรกลับเพื่อบังคับคิวเมธอด. css () ไปที่. slidedown () หลังจาก $ ('#box'). slideup ('slow') slidedown ('ช้า', ฟังก์ชั่น ({$ (นี่) .css ('พื้นหลัง', 'สีส้ม');});แต่ถ้าเป็นกรณีนี้เมื่อมีแอนิเมชั่นที่รอคิวจำนวนมากความสามารถในการอ่านจะไม่เพียง แต่ลดลง แต่วิธีการเคลื่อนไหวดั้งเดิมไม่ชัดเจนพอ ดังนั้นความคิดของเราคือการดำเนินการแต่ละครั้งเป็นวิธีที่เป็นอิสระ จากนั้น jQuery ให้วิธีการที่คล้ายกับฟังก์ชั่นการโทรกลับ: .Queue ()
// ใช้เมธอด. คิว () เพื่อจำลองวิธีการเคลื่อนไหวหลังจากทำตามวิธีการเคลื่อนไหว $ ('#box') slideup ('slow') slidedown ('slow') คิว (ฟังก์ชั่น () {$ (นี่) .css ('พื้นหลัง', 'สีส้ม');});ตอนนี้เราต้องการเพิ่มแอนิเมชั่นที่ซ่อนอยู่ในวิธี. คิว () แต่เราพบว่ามันเป็นไปไม่ได้ที่จะนำไปใช้ สิ่งนี้เกิดจากคุณสมบัติ. คิว () การแก้ไข: ฟังก์ชั่นการโทรกลับของ jQuery .Queue () สามารถผ่านพารามิเตอร์ซึ่งเป็นฟังก์ชันถัดไป เรียกวิธีการนี้ () ในตอนท้ายเพื่อเรียกใช้แอนิเมชั่นคิว
// ใช้พารามิเตอร์ถัดไปเพื่อใช้แอนิเมชั่นคิวการโทรอย่างต่อเนื่อง $ ('#box') SlideUp ('slow') Slidedown ('slow') คิว (ฟังก์ชั่น (ถัดไป {$ (นี้) .css ('พื้นหลัง', 'สีส้ม');PS: .Queue () วิธียังมีฟังก์ชั่นอื่นซึ่งก็คือการได้รับความยาวของคิวแอนิเมชั่นปัจจุบัน (ไม่แสดงรายละเอียด)
jQuery ยังมีวิธีการใช้งานเพื่อทำความสะอาดคิว: .clearqueue () ใส่ลงในฟังก์ชั่นการโทรกลับคิวหรือวิธี. คิว () และคิวที่เหลือที่ถูกดำเนินการสามารถลบออกได้
// ทำความสะอาดคิวแอนิเมชัน $ ('#box') slidedown ('slow', function () {$ (this) .clearqueue ()}); หก. วิธีการที่เกี่ยวข้องกับภาพเคลื่อนไหว
หลายครั้งที่จำเป็นต้องหยุดรันแอนิเมชั่นและ jQuery ให้วิธี. stop () สำหรับสิ่งนี้ มันมีพารามิเตอร์เสริมสองตัว:. Stop (Clearqueue, Gotoend); Clearqueue ผ่านค่าบูลีนซึ่งหมายถึงว่าจะล้างคิวแอนิเมชั่นที่ไม่ได้ดำเนินการหรือไม่
$ ('. animate'). คลิก (function () {$ ('#box'). animate ({'left': '300px'}, 1000); $ ('#box'). animate ({'top': '300px'}, 1000); $ ('#box') $ ('#box'). animate ({'ความสูง': '300px'}, 1000); $ ('. หยุด') คลิก (ฟังก์ชัน () {$ ('#box'). หยุด (จริง, เท็จ);});// หมายเหตุ: พารามิเตอร์แรกระบุว่าจะยกเลิกภาพเคลื่อนไหวคิวหรือไม่ค่าเริ่มต้นเป็นเท็จ หากพารามิเตอร์เป็นจริงภาพเคลื่อนไหวคิวคิวที่ตามมาจะถูกยกเลิกเมื่อมีแอนิเมชั่นคิว พารามิเตอร์ที่สองระบุว่ามันมาถึงจุดสิ้นสุดของภาพเคลื่อนไหวปัจจุบันและค่าเริ่มต้นเป็นเท็จ หากพารามิเตอร์เป็นจริงมันจะถึงจุดสิ้นสุดทันทีหลังจากหยุด คุณสามารถคัดลอกและสัมผัสได้ด้วยตัวเอง
บางครั้งเมื่อดำเนินการแอนิเมชั่นหรือแอนิเมชันที่รอคิวมีความล่าช้าก่อนการเคลื่อนไหวและ jQuery ให้วิธี. delay () สำหรับสิ่งนี้ วิธีนี้สามารถตั้งค่าความล่าช้าก่อนการเคลื่อนไหวหรือเพิ่มในช่วงกลางของแอนิเมชันที่เข้าคิว
// ความล่าช้าเริ่มต้นคือ 1 วินาทีการหน่วงเวลากลางคือ 1 วินาที $ ('. animate') คลิก (ฟังก์ชัน () {$ ('#box'). การหน่วงเวลา (1,000). แอนไลท์ ({'ซ้าย': '300px'}, 1000); $ ('#box'). 'Width': '300px'}, 1000);arguments.callee ทำงานในฟังก์ชั่นที่แสดงถึงฟังก์ชันใด ใช้โดยทั่วไปในฟังก์ชั่นที่ไม่ระบุชื่อ ในฟังก์ชั่นที่ไม่ระบุชื่อบางครั้งคุณต้องเรียกตัวเองว่า แต่เนื่องจากเป็นฟังก์ชั่นที่ไม่ระบุชื่อจึงไม่มีชื่อและสามารถปรับได้ ในเวลานี้ arguments.callee สามารถใช้แทนฟังก์ชั่นที่ไม่ระบุชื่อ
// เรียกใช้ซ้ำตัวเอง, ลูปอนันต์ดำเนินการ $ ('#box') slidetoggle ('slow', function () {$ (this) .slidetoggle ('slow', arguments.callee);});คุณสมบัติ $ .fx.off สามารถปิดเอฟเฟกต์ภาพเคลื่อนไหวทั้งหมด
$ .fx.off = true; // ค่าเริ่มต้นเป็นเท็จ
ทั้งหมดเป็นที่เข้าใจ
ข้างต้นคือการแบ่งปันรหัสเอฟเฟกต์แอนิเมชั่น jQuery แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ