Jquery Animation

29/09/2019

Bài sau » « Bài trước

Jquery Animation - Phương thức animate()

Với jquery, bạn có thể tạo các hiệu ứng tùy chỉnh bằng phương thức animate().

Cú pháp:

$(selector).animate({params},speed,callback);

Các tham số trong cú pháp ở trên là:

- params: là danh sách các thuộc tính CSS để làm hiệu ứng động. Tham số này bắt buộc phải có.

- speed: là thời gian để thực hiện hiệu ứng. Các giá trị có thể nhận là: "slow", "fast" hoặc mili giây. Tham số này tùy chọn.

- callback: Gọi đến 1 function để thực thi sau khi animation hoàn thành.

Ví dụ dưới đây cho thẻ DIV dịch chuyển qua phải cách lề trái 250px:

$("button").click(function(){ $("div").animate({left: '250px'}); });

Mặc định, các thẻ HTML có thuộc tính position là static nên nó không thể di chuyển.
Vì vậy, để phần tử HTML animation được thì đầu tiên ta phải set CSS position cho nó: relative, fixed hoặc absolute.

Jquery animate() - Thao tác nhiều thuộc tính

Trong animate() thì nhiều thuộc tính có thể thực hiện cùng lúc.

Ví dụ dưới đây thẻ DIV di chuyển cách lề trái 250px, đồng thời giảm opacity còn 0.5, tăng width lên 150px và height lên 150px.

Code HTML:


Code jquery:

$("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); });

Lưu ý quan trọng: Các thuộc tính gồm nhiều từ ghép bởi dấu gạch ngang (-) thì phải viết lại thành kiểu camel-cased: padding-left => paddingLeft, margin-right => marginRight,....

Jquery animate() - Sử dụng giá trị tương đối

Sử dụng giá trị tương đối (giá trị tương đối với giá trị hiện tại của phần tử). Điều này được thực hiện bằng cách đặt += hoặc -= trước giá trị:

Cũng đoạn code HTML như trên, thì ví dụ này tương ứng mỗi lần click vào button thì giá trị width và height của DIV lại tăng thêm 150px.

$("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); });

Jquery animate() - Sử dụng giá trị định nghĩa sẵn

Trong Jquery animate() bạn cũng có thể sử dụng giá trị định nghĩa sẵn như: 'hide', 'show' hoặc 'toggle' cho các hiệu ứng.

$("button").click(function(){ $("div").animate({ height: 'toggle' }); });

Jquery animate() - Hàng đợi

Mặc định, Tính năng hàng đợi trong jquery cũng áp dụng cho animations.

Điều này có nghĩa là nếu bạn viết nhiều lệnh gọi animate(), jQuery sẽ tạo một hàng đợi "nội bộ" với các cuộc gọi phương thức này. Sau đó, nó chạy các phương thức animate theo thứ tự ONE by ONE.

$("button").click(function(){ var div = $("div"); 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"); });

Demo jquery animate()


Bài sau » « Bài trước
Back to top