Hiệu ứng trong jQuery

Nhật Linh

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 khác nhau. Các phương thức jQuery cho phép chúng ta áp dụng nhanh chóng những hiệu ứng phổ biến với cấu hình tối thiểu.

Bài hướng dẫn này sẽ đề cập đế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

Nếu đang trông chờ những lệnh ngắn gọn để hiện và ẩn phần tử trong jQuery thì bạn sẽ bị thất vọng đâu. Nó thực sự rất đơn giản và dễ nhờ. show() để hiển thị các phần tử trong một tập hợp được wrap (gói/bọc) và hide() để ẩn chúng.

Cú pháp show()

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ú pháp hide()

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

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>

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:

Phương thức	Mô tả
animate(params, [duration, easing, callback])	Một hàm để tạo các hiệu ứng custom.
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.
3fadeOut(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.
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.
hide()	Ẩn mỗi phần tử trong tập hợp đã so khớp nếu chúng đã hiển thị.
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.
show()	Hiển thị mỗi phần tử trong tập hợp đã so khớp nếu chúng bị ẩn.
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.
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.
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.
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.
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.
toggle()	Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp.
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.
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ử.
jQuery.fx.off	Vô hiệu hóa toàn bộ tất cả hiệu ứng.

Các hiệu ứng dựa trên 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>

Phương thức	Mô tả
Blind	Blind away phần tử hoặc hiển thị nó bằng blind in.
Bounce	Bounce phần tử theo chiều dọc hoặc chiều ngang n lần.
Clip	Clip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang.
Drop	Drop away phần tử hoặc hiển thị nó bởi drop in.
Explode	Explode phần tử thành nhiều phần.
Fold	Fold phần tử như một phần của tờ giấy.
Highlight	Highlight nền với màu đã cho.
Puff	Scale và fade out các hiệu ứng tạo ra hiệu ứng puff.
Pulsate	Pulsate độ chắn sáng của phần tử nhiều lần.
Scale	Shrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó.
Shake	Shake phần tử theo chiều dọc hoặc chiều ngang n lần.
Size	Đưa phần tử về chiều cao và rộng đã xác định.
Slide	Slide out phần tử ra khỏi cửa nhìn.
Transfer	Chuyển hình dáng của một phần tử cho phần tử khác.