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	โอน โอนโครงร่างขององค์ประกอบไปยังอีกองค์ประกอบหนึ่ง