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:
<b>[selector].</b>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:
<b>[selector].</b>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:
<b>[selector].</b>.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:
| 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.offVô 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 | BlindBlind away phần tử hoặc hiển thị nó bằng blind in |
| 2 | BounceBounce phần tử theo chiều dọc hoặc chiều ngang n lần |
| 3 | ClipClip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang |
| 4 | DropDrop away phần tử hoặc hiển thị nó bởi drop in |
| 5 | ExplodeExplode phần tử thành nhiều phần |
| 6 | FoldFold phần tử như một phần của tờ giấy |
| 7 | HighlightHighlight nền với màu đã cho |
| 8 | PuffScale và fade out các hiệu ứng tạo ra hiệu ứng puff |
| 9 | PulsatePulsate độ chắn sáng của phần tử nhiều lần |
| 10 | ScaleShrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó |
| 11 | ShakeShake 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 | SlideSlide out phần tử ra khỏi cửa nhìn |
| 14 | TransferChuyển hình dáng của một phần tử cho phần tử khác |
