jQuery - เอฟเฟกต์

jQuery มีอินเทอร์เฟซที่เรียบง่ายสำหรับการทำเอฟเฟกต์ที่น่าทึ่งประเภทต่างๆ วิธีการ jQuery ช่วยให้เราใช้เอฟเฟกต์ที่ใช้ทั่วไปได้อย่างรวดเร็วด้วยการกำหนดค่าขั้นต่ำ บทช่วยสอนนี้ครอบคลุมวิธีการ jQuery ที่สำคัญทั้งหมดในการสร้างเอฟเฟ็กต์ภาพ

การแสดงและการซ่อนองค์ประกอบ

คำสั่งสำหรับการแสดงและซ่อนองค์ประกอบเป็นสิ่งที่เราคาดหวัง - show() เพื่อแสดงองค์ประกอบในชุดรวมและ hide() เพื่อซ่อนพวกเขา

ไวยากรณ์

นี่คือไวยากรณ์ง่ายๆสำหรับ show() วิธีการ -

[selector].show( speed, [callback] );

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • speed - สตริงที่แสดงถึงหนึ่งในสามความเร็วที่กำหนดไว้ล่วงหน้า ("ช้า" "ปกติ" หรือ "เร็ว") หรือจำนวนมิลลิวินาทีในการเรียกใช้ภาพเคลื่อนไหว (เช่น 1,000)

  • callback- พารามิเตอร์ทางเลือกนี้แสดงถึงฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ภาพเคลื่อนไหวเสร็จสิ้น ดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่เคลื่อนไหว

ต่อไปนี้เป็นไวยากรณ์ง่ายๆสำหรับ hide() วิธีการ -

[selector].hide( speed, [callback] );

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • speed - สตริงที่แสดงถึงหนึ่งในสามความเร็วที่กำหนดไว้ล่วงหน้า ("ช้า" "ปกติ" หรือ "เร็ว") หรือจำนวนมิลลิวินาทีในการเรียกใช้ภาพเคลื่อนไหว (เช่น 1,000)

  • callback- พารามิเตอร์ทางเลือกนี้แสดงถึงฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ภาพเคลื่อนไหวเสร็จสิ้น ดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่เคลื่อนไหว

ตัวอย่าง

พิจารณาไฟล์ HTML ต่อไปนี้ด้วยการเข้ารหัส JQuery ขนาดเล็ก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

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

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การสลับองค์ประกอบ

jQuery มีวิธีการในการสลับสถานะการแสดงผลขององค์ประกอบระหว่างเปิดเผยหรือซ่อน หากองค์ประกอบถูกแสดงในตอนแรกองค์ประกอบนั้นจะถูกซ่อนไว้ หากซ่อนไว้ระบบจะแสดง

ไวยากรณ์

นี่คือไวยากรณ์ง่ายๆสำหรับหนึ่งใน toggle() วิธีการ -

[selector]..toggle([speed][, callback]);

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • speed - สตริงที่แสดงถึงหนึ่งในสามความเร็วที่กำหนดไว้ล่วงหน้า ("ช้า" "ปกติ" หรือ "เร็ว") หรือจำนวนมิลลิวินาทีในการเรียกใช้ภาพเคลื่อนไหว (เช่น 1,000)

  • callback- พารามิเตอร์ทางเลือกนี้แสดงถึงฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ภาพเคลื่อนไหวเสร็จสิ้น ดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่เคลื่อนไหว

ตัวอย่าง

เราสามารถทำให้องค์ประกอบใด ๆ เคลื่อนไหวได้เช่น <div> ธรรมดาที่มีรูปภาพ -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการ JQuery Effect

คุณได้เห็นแนวคิดพื้นฐานของ jQuery Effects แล้ว ตารางต่อไปนี้แสดงวิธีการที่สำคัญทั้งหมดในการสร้างเอฟเฟกต์ประเภทต่างๆ -

ซีเนียร์ วิธีการและคำอธิบาย
1 ภาพเคลื่อนไหว (พารามิเตอร์ [ระยะเวลาการค่อยๆเปลี่ยนการโทรกลับ])

ฟังก์ชันสำหรับสร้างภาพเคลื่อนไหวแบบกำหนดเอง

2 fadeIn (ความเร็ว [โทรกลับ])

จางหายไปในองค์ประกอบที่ตรงกันทั้งหมดโดยการปรับความทึบและเริ่มการเรียกกลับที่เป็นทางเลือกหลังจากเสร็จสิ้น

3 fadeOut (ความเร็ว [โทรกลับ])

ลบองค์ประกอบที่ตรงกันทั้งหมดโดยปรับความทึบเป็น 0 จากนั้นตั้งค่าการแสดงผลเป็น "ไม่มี" และเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น

4 fadeTo (ความเร็วความทึบการโทรกลับ)

ลดความทึบขององค์ประกอบที่ตรงกันทั้งหมดให้เป็นความทึบที่ระบุและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น

5 ซ่อน ()

ซ่อนชุดขององค์ประกอบที่ตรงกันแต่ละชุดหากมีการแสดง

6 ซ่อน (ความเร็ว [โทรกลับ])

ซ่อนองค์ประกอบที่ตรงกันทั้งหมดโดยใช้ภาพเคลื่อนไหวที่สวยงามและเริ่มการเรียกกลับที่เป็นตัวเลือกหลังจากเสร็จสิ้น

7 แสดง ()

แสดงชุดขององค์ประกอบที่ตรงกันแต่ละชุดหากซ่อนอยู่

8 แสดง (ความเร็ว [โทรกลับ])

แสดงองค์ประกอบที่ตรงกันทั้งหมดโดยใช้ภาพเคลื่อนไหวที่สวยงามและเริ่มการเรียกกลับที่เป็นทางเลือกหลังจากเสร็จสิ้น

9 slideDown (ความเร็ว [โทรกลับ])

เปิดเผยองค์ประกอบที่ตรงกันทั้งหมดโดยปรับความสูงและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น

10 slideToggle (ความเร็ว [โทรกลับ])

สลับการมองเห็นขององค์ประกอบที่ตรงกันทั้งหมดโดยปรับความสูงและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น

11 slideUp (ความเร็ว [โทรกลับ])

ซ่อนองค์ประกอบที่ตรงกันทั้งหมดโดยปรับความสูงและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น

12 หยุด ([clearQueue, gotoEnd])

หยุดภาพเคลื่อนไหวทั้งหมดที่กำลังทำงานอยู่ในองค์ประกอบที่ระบุทั้งหมด

13 สลับ ()

สลับการแสดงชุดขององค์ประกอบที่ตรงกันแต่ละชุด

14 สลับ (ความเร็ว [โทรกลับ])

สลับการแสดงชุดขององค์ประกอบที่ตรงกันแต่ละชุดโดยใช้ภาพเคลื่อนไหวที่สวยงามและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น

15 สลับ (สวิตช์)

สลับการแสดงชุดขององค์ประกอบที่ตรงกันแต่ละชุดตามสวิตช์ (จริงแสดงองค์ประกอบทั้งหมดเท็จซ่อนองค์ประกอบทั้งหมด)

16 jQuery.fx.off

ปิดใช้งานภาพเคลื่อนไหวทั้งหมดทั่วโลก

ผลกระทบจากไลบรารี UI

ในการใช้เอฟเฟกต์เหล่านี้คุณสามารถดาวน์โหลด jQuery UI Library ล่าสุดได้ jquery-ui-1.11.4.custom.zipจากjQuery UI Libraryหรือใช้ Google CDN เพื่อใช้ในลักษณะเดียวกับที่เราทำกับ jQuery

เราใช้ Google CDN สำหรับ jQuery UI โดยใช้ข้อมูลโค้ดต่อไปนี้ในหน้า HTML เพื่อให้เราสามารถใช้ jQuery UI -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
ซีเนียร์ วิธีการและคำอธิบาย
1 ตาบอด

บังตาองค์ประกอบออกไปหรือแสดงโดยทำให้ไม่เห็น

2 ตีกลับ

ตีกลับองค์ประกอบในแนวตั้งหรือแนวนอน n ครั้ง

3 คลิป

คลิปเปิดหรือปิดองค์ประกอบในแนวตั้งหรือแนวนอน

4 วาง

ปล่อยองค์ประกอบออกไปหรือแสดงโดยการวางองค์ประกอบ

5 ระเบิด

ระเบิดองค์ประกอบออกเป็นชิ้น ๆ

6 พับ

พับองค์ประกอบเหมือนกระดาษ

7 ไฮไลต์

ไฮไลต์พื้นหลังด้วยสีที่กำหนด

8 พัฟ

ปรับขนาดและเลือนภาพเคลื่อนไหวสร้างเอฟเฟกต์พัฟ

9 กระตุ้น

กระตุ้นความทึบขององค์ประกอบหลาย ๆ ครั้ง

10 มาตราส่วน

ลดขนาดหรือขยายองค์ประกอบตามปัจจัยเปอร์เซ็นต์

11 เขย่า

เขย่าองค์ประกอบในแนวตั้งหรือแนวนอน n ครั้ง

12 ขนาด

ปรับขนาดองค์ประกอบตามความกว้างและความสูงที่ระบุ

13 สไลด์

เลื่อนองค์ประกอบออกจากวิวพอร์ต

14 โอน

โอนโครงร่างขององค์ประกอบไปยังอีกองค์ประกอบหนึ่ง