Bài jQuery 10: Các hiệu ứng Animation trong jQuery

0
233

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn các hiệu ứng Animation trong jQuery.

Phương thức jQuery animate()

Phương thức jQuery animate() được sử dụng để tạo các hình động tùy chỉnh. Phương thức animate() thường được sử dụng để làm hiệu ứng cho các thuộc tính CSS number, ví dụ: widthheightmarginpaddingopacitytopleft, v.v. nhưng các thuộc tính không phải là số như color hoặc background-color không thể tạo hiệu ứng bằng cách sử dụng các hàm jQuery cơ bản.

Cú pháp:

Cú pháp cơ bản của phương thức jQuery animate():

Các tham số của phương thức animate() có các ý nghĩa sau:

  • Tham số properties là bắt buộc để xác định các thuộc tính CSS được tạo hiệu ứng.
  • Tham số duration  là tùy chọn, nó chỉ định thời gian hiệu ứng sẽ chạy. Thời lượng có thể được chỉ định bằng cách sử dụng một trong các chuỗi được xác định trước 'slow' hoặc 'fast' hoặc trong một số mili giây; giá trị cao hơn cho thấy hình ảnh động chậm hơn.
  • Tham số callback là tùy chọn, đây là một chức năng để gọi khi hoạt động hoàn tất.

Dưới đây là một ví dụ đơn giản về phương thức jQuery animate() tạo hiệu ứng với một hình ảnh từ vị trí ban đầu của nó sang phải 300 pixel khi người dùng nhấp vào nút.

Animate Nhiều thuộc tính cùng một lúc

Bạn cũng có thể làm các hiệu ứng động cho nhiều thuộc tính của một phần tử cùng một lúc bằng phương thức animate(). Tất cả các hiệu ứng sẽ chạy đồng thời mà không có bất kỳ sự chậm trễ.

Animate Nhiều thuộc tính theo từng bước một

Bạn cũng có thể tạo hiệu ứng động cho nhiều thuộc tính của từng phần tử trong từng hàng một bằng cách sử dụng tính năng chaning của jQuery.

Ví dụ sau đây mô tả một hình ảnh động được sẽ chạy từng hiệu ứng một:

Thuộc tính Animate với giá trị tương đối

Bạn cũng có thể xác định các giá trị tương đối cho các thuộc tính Animate. Nếu một giá trị được chỉ định với tiền tố + = hoặc - = ở đầu hàng, thì giá trị đích được tính bằng cách thêm hoặc trừ số đã cho khỏi giá trị hiện tại của thuộc tính.

Ví dụ:

Thuộc tính Animate với các giá trị được xác định trước

Ngoài các giá trị số, mỗi thuộc tính có thể lấy các chuỗi 'show', 'hide''toggle‘. Nó sẽ rất hữu ích trong một tình huống khi bạn chỉ muốn làm hiệu ứng động cho các thuộc tính từ giá trị hiện tại của nó thành giá trị ban đầu và ngược lại.

Ví dụ:

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn các hiệu ứng Animation trong jQuery. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Các Animation Stop trong jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây