jQuery: Hiệu ứng Animate
Hiệu ứng Animate hay hiệu ứng hoạt họa trong jQuery.
Với jQuery bạn có thể thiết lập hiệu ứng hoạt họa bằng cách sử dụng phương thức animate().
Cú pháp:
$(Bộ_chọn).animate({params}, Tốc_độ, callback);
Tham số params phải được đặt trong cặp {}, tham số này chứa các thuộc tính CSS để tạo hoạt ảnh.
Lưu ý: Để có thể thiết lập hiệu ứng hoạt họa cho phần tử bạn phải thiết lập thuộc tính position của phần tử đó là một trong ba giá trị relative, fixed hoặc absolute.
Ví dụ dưới đây sẽ thiết lập hoạt họa cho vị trí của phần tử <div> cách bên trái 250px.
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({left:'250px'}); }); }); </script> </head> <body> <button>Click => Hoạt họa</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; width:200px; position:relative;">jQuery</div> </body> </html>
Demo:
Có một điểm rất hay mà bạn nên biết, đó là bạn có thể thiết lập cùng lúc nhiều thuộc tính CSS cho hoạt họa (animate), các thuộc tính được phân cách nhau bằng dấu phẩy (,), có điều bạn lưu ý là nếu như thuộc tính nào có dạng “abc-def” thì khi áp dụng bạn cần viết lại dưới dạng “abcDef”, ví dụ như thuộc tính “font-size” bạn sẽ viết lại là “fontSize”.
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({ left:'250px', opacity:'0.5', height:'300px', width:'300px', fontSize:'50px' },'slow'); }); }); </script> </head> <body> <button>Click => Hoạt họa</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; text-align:center; width:200px; position:relative;">jQuery</div> </body> </html>
Demo:
Thêm hoặc bớt liên tiếp giá trị trong hàm animate()
Giá trị tương quan được thiết lập bằng cách đặt += (thêm) hoặc -= (bớt) trước giá trị bạn muốn thay đổi. Chằng hạn như bạn muốn thêm chiều cao cho phần tử một lượng là 50px thì bạn viết là height:’+=50px’, bạn muốn bớt đi chiều rộng cho phần tử 50px bạn viết là width:’-=50px’.
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({ left:'250px', height:'+=50px', width:'+=50px' }); }); }); </script> </head> <body> <button>Click đây nhiều lần => Tăng kích thước liên tiếp</button> <br><br> <div id="ani1" style="background:#98bf21;height:200px;width:200px;position:relative;">jQuery</div> </body> </html>
Demo:
Sử dụng các giá trị sẵn có trong phương thức animate()
Bạn được quyền sử dụng những giá trị có sẵn để áp dụng cho thuộc tính CSS như show, hide, toggle, …
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({ height:'toggle' }); }); }); </script> </head> <body> <button>Click đây nhiều lần => Hoạt họa</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; width:200px; position:relative;">jquery</div> </body> </html>
Demo:
Tính năng hàng đợi trong phương thức animate()
jQuery cho phép bạn áp dụng nhiều lần phương thức animate() cho một phần tử, khi đó mỗi phương thức animate() áp dụng sẽ phải được đặt thành một lệnh riêng, phương thức animate() nào đứng trước thì được thực hiện trước, và phương thức animate() này phải được thực hiện xong mới chuyển sang phương thức animate() khác, điều này sẽ tạo nên tính năng hàng đợi.
Ví dụ 1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ var div=$("#ani1"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> </head> <body> <button>Click 1 lần => Hoạt họa 1 lần. Click n lần => Lặp hoạt họa n lần</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; width:200px; position:relative;">QUEUE</div> </body> </html>
Demo:
Trong ví dụ dưới đây, phần từ <div> đầu tiên sẽ được di chuyển sang phải, sau đó sẽ tăng kích thước font chữ cho văn bản bên trong:
Ví dụ 2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ var div=$("#ani1"); div.animate({left:'150px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); }); </script> </head> <body> <button>Click => Hoạt họa</button> <br><br> <div id="ani1" style="text-align:center; background:#98bf21; height:200px; width:200px; position:relative;">jQuery</div> </body> </html>
Demo: