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). Ví dụ 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. 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: This is a SQUARE Toggle các ptoggle 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). Ví dụ 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. 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à jqueryui-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/jqueryui.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 hầ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). Ví dụ 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. 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à jqueryui-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/jqueryui.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