Hiệu ứng động (Animation) trong jQuery
Phương thức animate() trong jQuery được dùng để tạo hiệu ứng động (di chuyển, thay đổi kích thước,....) cho phần HTML. Click vào đây để xem hiệu ứng động Phương thức animate() trong jQuery Phương thức animate() được dùng để tạo hiệu ứng động cho phần tử HTML Cú pháp ...
Phương thức animate() trong jQuery được dùng để tạo hiệu ứng động (di chuyển, thay đổi kích thước,....) cho phần HTML.
Click vào đây để xem hiệu ứng động
Phương thức animate() trong jQuery
Phương thức animate() được dùng để tạo hiệu ứng động cho phần tử HTML
$(selector).animate({params},speed,callback);
TRONG ĐÓ:
- Tham số params là CÁC cặp thuộc tính : giá trị trong CSS (Ví dụ, height : 300px) để thay đổi hình dạng cho phần tử HTML
- Tham số speed có thể CÓ hoặc KHÔNG. Tham số speed là tốc độ của hiệu ứng. Chỗ tham số speed có thể điền là "slow" (tốc độ chậm), "fast" (tốc độ nhanh), hoặc đơn vị milliseconds (ví dụ 1000 = 1 giây).
- Tham số callback có thể CÓ hoặc KHÔNG. Tham số callback là một hàm xảy ra sau khi hiệu ứng animate() hoàn thành 100%.
Đoạn mã dưới đây dùng thuộc tính awidth có giá trị 500px với tham số speed bằng 2000 nhằm tạo hiệu ứng kéo dài phần tử ra với tốc độ 2 giây.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({awidth:'500px'},2000);
})
})
Phương thức animate() sử dụng nhiều cặp thuộc tính
Ở tham số params trong cú pháp trên, ta có thể điền vào đó nhiều cặp thuộc tính : giá trị, bằng cách dùng dấu phẩy ngăn cách giữa các cặp
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
awidth:'200px',
height:'200px',
top:'200px',
left:'150px',
opacity:'0.3'
},3000);
})
})
 |
Trong trường hợp muốn di chuyển phần tử, bạn phải thiết lập thuộc tính position là relative, absolute hoặc fixed (Vì position:static phần tử không thể thay đổi vị trí) |
Phương thức animate() sử dụng giá trị TƯƠNG ĐỐI và TUYỆT ĐỐI
Đoạn mã dưới đây là một ví dụ về sử dụng giá trị TUYỆT ĐỐI. Khi sử dụng giá trị TUYỆT ĐỐI, ta không quan tâm đến giá trị thuộc tính ban đầu là bao nhiu, ta chỉ biết giá trị thuộc tính cuối cùng là bằng giá trị TUYỆT ĐỐI
$(document).ready(function(){
$("button").click(function(){
$("div").animate({awidth:'400px',height:'400px'},2000);
})
})
Đoạn mã dưới đây là một ví dụ về sử dụng giá trị TƯƠNG ĐỐI. Khi sử dụng giá trị TƯƠNG ĐỐI, giá trị thuộc tính cuối cùng của phần tử sẽ bằng giá trị ban đầu cộng thêm (+=) hoặc giảm bớt (-=) bởi giá trị TƯƠNG ĐỐI.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({awidth:'+=400px',height:'-=150px'},2000);
})
})
Sử dụng liên tiếp các phương thức animate()
Nếu bạn sử dụng liên tiếp các phương thức animate() cho cùng một phần tử HTML. Thì các phương thức animate() đó sẽ tạo thành một hàng đợi, phương thức animate() bên dưới sẽ được thực thi khi phương thức animate() phía trên đã thực thi xong 100%.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'300px'},1000);
$("div").animate({top:'400px'},1000);
$("div").animate({left:'0px'},1000);
$("div").animate({top:'0px'},1000);
})
})
Phương thức animate() sử dụng giá trị được xác định trước
Bạn cũng có thể xác định giá trị chuyển động của các thuộc tính như "show", "hide", "toggle".
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:'toggle',awidth:'toggle'},2000);
})
})
