Hiệu ứng trong jQuery




jQuery cung cấp một giao diện đơn giản để thực hiện các loại hiệu ứng tuyệt vời đa dạng. Các phương thức jQuery cho phép chúng ta áp dụng nhanh chóng các hiệu ứng phổ biến với cấu hình tối thiểu.

Chương này sẽ bàn luận tất cả phương thức jQuery quan trọng để tạo các Visual Effect.

Hiển thị và ẩn các phần tử trong jQuery

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

Cú pháp

Sau đây là cú pháp đơn giản cho phương thức show() trong jQuery:

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

Miêu tả chi tiết về các tham số:

  • speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).

  • callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng.

Còn đây là cú pháp đơn giản cho phương thức hide() trong jQuery:

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

Miêu tả chi tiết về các tham số:

  • speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).

  • callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng.

Ví dụ

Bạn xem xét HTML file sau với một jQuery code nhỏ:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho kết quả sau:

Toggle các phần tử trong jQuery

jQuery cung cấp các phương thức để toggle trạng thái hiển thị của các phần tử giữa hiển thị và ẩn. Nếu phần tử khi khởi tạo là hiển thị, nó sẽ được ẩn; nếu là ẩn, nó sẽ được hiển thị.

Cú pháp

Cú pháp đơn giản cho một phương thức toggle() trong jQuery:

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

Dưới đây là miêu tả về các tham số:

  • speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).

  • callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng.

Ví dụ

Chúng ta có thể tạo hiệu ứng cho bất kỳ phần tử nào, ví dụ như một phần tử div chứa một hình ảnh:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho kết quả sau:

Các phương thức jQuery Effect

Ở phần trên, bạn đã theo dõi các khái niệm cơ bản về jQuery Effect. Bảng dưới liệt kê tất cả phương thức cơ bản để tạo các kiểu hiệu ứng khác nhau:

STT Phương thức & Miêu tả
1 animate( params, [duration, easing, callback] )

Một hàm để tạo các hiệu ứng custom

2 fadeIn( speed, [callback] )

Fade in tất cả các phần tử đã so khớp bởi việc điều chỉnh opacity (độ chắn sáng) và kích hoạt một callback tùy ý sau khi hoàn thành.

3 fadeOut( speed, [callback] )

Fade out tất cả phần tử đã so khớp bởi điều chỉnh opacity về 0, sau đó thiết lập hiển thị về "none" và kích hoạt một callback tùy ý sau khi hoàn thành

4 fadeTo( speed, opacity, callback )

Fade độ chắn sáng của tất cả phần tử đã so khớp tới một opacity đã cho và kích hoạt một callback tùy ý sau khi hoàn thành.

5 hide( )

Ẩn mỗi phần tử trong tập hợp đã so khớp nếu chúng đã hiển thị

6 hide( speed, [callback] )

Ẩn tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

7 show( )

Hiển thị mỗi phần tử trong tập hợp đã so khớp nếu chúng bị ẩn

8 show( speed, [callback] )

Hiển thị tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

10 slideDown( speed, [callback] )

Bộc lộ tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành

11 slideToggle( speed, [callback] )

Toggle sự nhìn thấy của tất cả phần tử đã so khớp bởi điều chỉnh chiều cao và kích hoạt một callback tùy ý sau khi hoàn thành

12 slideUp( speed, [callback] )

Ẩn tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành.

13 stop( [clearQueue, gotoEnd ])

Dừng tất cả các hiệu ứng đang chạy hiện tại trên tất cả phần tử đã xác định

14 toggle( )

Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp

15 toggle( speed, [callback] )

Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

16 toggle( switch )

Toggle sự hiển thị mỗi phần tử trong tập hợp đã so khớp dựa trên việc chuyển mạch giữa: true là hiển thị tất cả phần tử, false là ẩn tất cả phần tử

17 jQuery.fx.off

Vô hiệu hóa toàn bộ tất cả hiệu ứng

Các hiệu ứng trên cơ sở UI Library trong jQuery

Để sử dụng các hiệu ứng này, bạn có thể hoặc tải về jQuery UI Library mới nhất là jquery-ui-1.11.4.custom.zip từ trang jQuery UI Library hoặc sử dụng Google CDN để sử dụng nó theo cách tương tự như chúng tôi đã thực hiện cho jQuery.

Chúng tôi đã sử dụng Google CDN cho jQuery UI bởi sử dụng đoạn trích code sau trong trang HTML:

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
STT Phương thức & Miêu tả
1 Blind

Blind away phần tử hoặc hiển thị nó bằng blind in

2 Bounce

Bounce phần tử theo chiều dọc hoặc chiều ngang n lần

3 Clip

Clip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang

4 Drop

Drop away phần tử hoặc hiển thị nó bởi drop in

5 Explode

Explode phần tử thành nhiều phần

6 Fold

Fold phần tử như một phần của tờ giấy

7 Highlight

Highlight nền với màu đã cho

8 Puff

Scale và fade out các hiệu ứng tạo ra hiệu ứng puff

9 Pulsate

Pulsate độ chắn sáng của phần tử nhiều lần

10 Scale

Shrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó

11 Shake

Shake phần tử theo chiều dọc hoặc chiều ngang n lần.

12 Size

Đưa phần tử về chiều cao và rộng đã xác định

13 Slide

Slide out phần tử ra khỏi cửa nhìn

14 Transfer

Chuyển hình dáng của một phần tử cho phần tử khác

Loạt bài hướng dẫn học lập trình jQuery cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học jQuery khác tại VietJack: