jQuery - Hiệu ứng

jQuery cung cấp một giao diện đơn giản tầm thường để thực hiện nhiều loại hiệu ứng tuyệt vời khác nhau. Các phương thức jQuery cho phép chúng ta nhanh chóng áp dụng các hiệu ứng thường dùng với cấu hình tối thiểu. Hướng dẫn này bao gồm tất cả các phương pháp jQuery quan trọng để tạo hiệu ứng hình ảnh.

Phần tử Hiển thị và Ẩn

Các lệnh để hiển thị và ẩn các phần tử là những gì chúng ta mong đợi - show() để hiển thị các phần tử trong một tập hợp được bao bọc và hide() để ẩn chúng.

Cú pháp

Đây là cú pháp đơn giản cho show() phương pháp -

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

Đây là mô tả của tất cả các tham số -

speed - Một chuỗi đại diện cho một trong ba tốc độ được xác định trước ("chậm", "bình thường" hoặc "nhanh") hoặc số mili giây để chạy hoạt ảnh (ví dụ: 1000).
callback- Tham số tùy chọn này đại diện cho một chức năng sẽ được thực thi bất cứ khi nào hoạt ảnh hoàn thành; thực thi một lần cho mỗi phần tử hoạt hình chống lại.

Sau đây là cú pháp đơn giản cho hide() phương pháp -

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

Đây là mô tả của tất cả các tham số -

speed - Một chuỗi đại diện cho một trong ba tốc độ được xác định trước ("chậm", "bình thường" hoặc "nhanh") hoặc số mili giây để chạy hoạt ảnh (ví dụ: 1000).
callback- Tham số tùy chọn này đại diện cho một chức năng sẽ được thực thi bất cứ khi nào hoạt ảnh hoàn thành; thực thi một lần cho mỗi phần tử hoạt hình chống lại.

Thí dụ

Hãy xem xét tệp HTML sau với một đoạn mã JQuery nhỏ:

<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>

Điều này sẽ tạo ra kết quả sau:

Chuyển đổi các yếu tố

jQuery cung cấp các phương thức để chuyển đổi trạng thái hiển thị của các phần tử giữa tiết lộ hoặc ẩn. Nếu phần tử được hiển thị ban đầu, nó sẽ bị ẩn; nếu ẩn, nó sẽ được hiển thị.

Cú pháp

Đây là cú pháp đơn giản cho một trong các toggle() phương pháp -

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

Đây là mô tả của tất cả các tham số -

speed - Một chuỗi đại diện cho một trong ba tốc độ được xác định trước ("chậm", "bình thường" hoặc "nhanh") hoặc số mili giây để chạy hoạt ảnh (ví dụ: 1000).
callback- Tham số tùy chọn này đại diện cho một chức năng sẽ được thực thi bất cứ khi nào hoạt ảnh hoàn thành; thực thi một lần cho mỗi phần tử hoạt hình chống lại.

Thí dụ

Chúng tôi có thể tạo hoạt ảnh cho bất kỳ phần tử nào, chẳng hạn như một <div> đơn giản chứa hình ảnh -

<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>

Điều này sẽ tạo ra kết quả sau:

Phương thức hiệu ứng JQuery

Bạn đã thấy khái niệm cơ bản về jQuery Effects. Bảng sau liệt kê tất cả các phương pháp quan trọng để tạo các loại hiệu ứng khác nhau -

Sr.No.	Phương pháp & Mô tả
1	hoạt ảnh (thông số, [thời lượng, tốc độ, gọi lại]) Một chức năng để tạo hoạt ảnh tùy chỉnh.
2	fadeIn (tốc độ, [gọi lại]) Làm mờ tất cả các phần tử phù hợp bằng cách điều chỉnh độ mờ của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
3	fadeOut (tốc độ, [gọi lại]) Làm mờ tất cả các phần tử phù hợp bằng cách điều chỉnh độ mờ của chúng thành 0, sau đó đặt hiển thị thành "không có" và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
4	fadeTo (tốc độ, độ mờ, gọi lại) Làm mờ độ mờ của tất cả các phần tử phù hợp đến độ mờ được chỉ định và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
5	ẩn giấu( ) Ẩn từng tập hợp các phần tử đã so khớp nếu chúng được hiển thị.
6	ẩn (tốc độ, [gọi lại]) Ẩn tất cả các phần tử phù hợp bằng cách sử dụng hoạt ảnh duyên dáng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
7	chỉ( ) Hiển thị từng tập hợp các phần tử đã so khớp nếu chúng bị ẩn.
số 8	hiển thị (tốc độ, [gọi lại]) Hiển thị tất cả các phần tử phù hợp bằng cách sử dụng hoạt ảnh duyên dáng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
9	slideDown (tốc độ, [gọi lại]) Hiển thị tất cả các phần tử phù hợp bằng cách điều chỉnh chiều cao của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
10	slideToggle (tốc độ, [gọi lại]) Chuyển đổi chế độ hiển thị của tất cả các phần tử phù hợp bằng cách điều chỉnh chiều cao của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
11	slideUp (tốc độ, [gọi lại]) Ẩn tất cả các phần tử phù hợp bằng cách điều chỉnh chiều cao của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
12	dừng lại ([clearQueue, gotoEnd]) Dừng tất cả các hoạt ảnh hiện đang chạy trên tất cả các phần tử được chỉ định.
13	chuyển đổi () Chuyển đổi hiển thị từng tập hợp các phần tử phù hợp.
14	chuyển đổi (tốc độ, [gọi lại]) Chuyển đổi hiển thị từng tập hợp các phần tử phù hợp bằng cách sử dụng hoạt ảnh duyên dáng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
15	nút chuyển đổi ) Chuyển đổi hiển thị từng tập hợp các phần tử phù hợp dựa trên công tắc (true hiển thị tất cả các phần tử, false ẩn tất cả các phần tử).
16	jQuery.fx.off Vô hiệu hóa toàn cầu tất cả các hoạt ảnh.

Hiệu ứng dựa trên thư viện giao diện người dùng

Để sử dụng các hiệu ứng này, bạn có thể tải xuống Thư viện giao diện người dùng jQuery mới nhất jquery-ui-1.11.4.custom.ziptừ Thư viện giao diện người dùng jQuery hoặc sử dụng Google CDN để sử dụng nó theo cách tương tự như chúng tôi đã làm cho jQuery.

Chúng tôi đã sử dụng Google CDN cho giao diện người dùng jQuery bằng đoạn mã sau trong trang HTML để chúng tôi có thể sử dụng giao diện người dùng jQuery -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Phương pháp & Mô tả
1	Mù Làm mờ phần tử đi hoặc hiển thị nó bằng cách làm mù phần tử đó.
2	Nảy Trả lại phần tử theo chiều dọc hoặc chiều ngang n lần.
3	Kẹp Cắt phần tử bật hoặc tắt, theo chiều dọc hoặc chiều ngang.
4	Rơi vãi Bỏ phần tử đi hoặc hiển thị phần tử đó bằng cách thả phần tử vào.
5	Phát nổ Nổ phần tử thành nhiều mảnh.
6	Gập lại Gấp phần tử giống như một tờ giấy.
7	Điểm nổi bật Đánh dấu nền bằng một màu xác định.
số 8	Phun Chia tỷ lệ và làm mờ dần các hoạt ảnh tạo ra hiệu ứng phồng.
9	Pulsate Tăng độ mờ của phần tử nhiều lần.
10	Tỉ lệ Thu nhỏ hoặc tăng trưởng một phần tử theo hệ số phần trăm.
11	Rung chuyển Lắc phần tử theo chiều dọc hoặc chiều ngang n lần.
12	Kích thước Thay đổi kích thước một phần tử thành chiều rộng và chiều cao được chỉ định.
13	Cầu trượt Trượt phần tử ra khỏi khung nhìn.
14	chuyển khoản Chuyển đường viền của một phần tử sang phần tử khác.