Khám Phá Đẳng Cấp của Hiệu Ứng Động trong jQuery

Những bài học jQuery trước đó đã giúp bạn tìm hiểu về hiệu ứng Fade in và Fade out trong jQuery. Để đào sâu hơn vào hiệu ứng động trong jQuery, hãy tiếp tục đọc bài viết này.

Khám Phá Vô Tận với Hiệu Ứng Động trong jQuery

1. Sử Dụng Phương Thức animate() trong jQuery

Phương thức animate() trong jQuery được dùng để tạo hiệu ứng động theo ý muốn. Thường được áp dụng để tạo hiệu ứng cho các thuộc tính số trong CSS như chiều rộng, chiều cao, canh lề, padding, ... nhưng không hỗ trợ cho các thuộc tính không phải số như màu sắc hay màu nền.

Ghi Chú:

Không phải mọi thuộc tính CSS đều có khả năng tạo hiệu ứng động. Đơn giản, chỉ những thuộc tính CSS chấp nhận giá trị là số, độ dài, phần trăm hoặc màu sắc mới có thể tạo hiệu ứng động.

Hơn nữa, thư viện jQuery không hỗ trợ tạo hiệu ứng động cho màu sắc. Để làm điều này, chúng ta sử dụng plugin color jQuery.

1.1 Cú Pháp của Phương Thức animate() trong jQuery

Cú pháp cơ bản của phương thức animate() trong jQuery được biểu diễn như sau:

Sử dụng đoạn mã $(selector).animate({ thuộc tính }, thời lượng, callback);

Đặc điểm quan trọng là:

- Tham số thuộc tính là bắt buộc, xác định các thuộc tính CSS tạo hiệu ứng động.

- Tham số thời lượng (tùy chọn) xác định thời gian chạy hiệu ứng. Sử dụng chuỗi 'chậm' hoặc 'nhanh' hoặc số mili giây để đặt thời lượng.

- Tham số callback (tùy chọn) là hàm được thực thi sau khi hiệu ứng động kết thúc.

Ví dụ: Dưới đây là một minh họa đơn giản về cách sử dụng phương thức animate() trong jQuery:

Kết quả xuất hiện như sau:

Lưu ý: Theo mặc định, tất cả các phần tử HTML đều ở trạng thái tĩnh. Vì các phần tử tĩnh không thể di chuyển, chúng ta cần thiết lập thuộc tính CSS position cho phần tử là relative, fixed, hoặc absolute để thực hiện hoặc tạo hiệu ứng động.

2. Tạo hiệu ứng động cho nhiều thuộc tính cùng một lúc

Thêm vào đó, có khả năng tạo hiệu ứng động cho nhiều yếu tố cùng một lúc bằng việc sử dụng phương thức animate().

Ví dụ: Minh họa cách tạo hiệu ứng động đa thuộc tính cùng một lúc bằng cách sử dụng phương thức animate():

Kết quả kịch bản sẽ hiển thị như sau sau khi người dùng kích chọn nút ảnh động:

Lưu ý: Để sử dụng thuộc tính CSS với phương thức animate(), tên của nó cần tuân thủ chuẩn camel-cased. Ví dụ, để tạo hiệu ứng động cho font size, sử dụng 'fontSize' thay vì 'font-size' hoặc 'marginLeft' thay vì 'margin-left', ... .

Mẹo: Thiết lập thuộc tính border-style trước khi tạo hiệu ứng động cho border-width.

3. Tạo hiệu ứng động cho từng thuộc tính một

Không chỉ tạo hiệu ứng cho nhiều thuộc tính cùng một lúc, chúng ta cũng có thể tạo hiệu ứng động cho từng thuộc tính một, xử lý chúng theo hàng đợi sử dụng tính năng chuỗi trong jQuery.

Ví dụ: Dưới đây là một ví dụ minh họa về cách tạo hiệu ứng động cho từng thuộc tính trong jQuery:

Kết quả hiển thị như sau:

4. Thuộc tính động với các giá trị tương đối (relative value)

Cũng có thể xác định giá trị tương đối cho thuộc tính động. Khi giá trị được đặt với tiền tố += hoặc -=, nó sẽ được tính dựa trên giá trị hiện tại của thuộc tính.

Ví dụ: Dưới đây là một minh họa về cách đặt giá trị tương đối cho các thuộc tính động trong jQuery:

Kết quả xuất hiện như sau:

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

Ngoài giá trị số, mỗi thuộc tính có thể chấp nhận các chuỗi 'show', 'hide' và 'toggle'. Các chuỗi này hữu ích khi muốn tạo hiệu ứng động bằng cách chuyển đổi giữa giá trị hiện tại và giá trị ban đầu.

Ví dụ: Dưới đây là một ví dụ về thuộc tính động với các giá trị được xác định trước:

Kết quả hiển thị như sau:

Trên đây là bài học giới thiệu về hiệu ứng động trong jQuery của Mytour. Trong bài học tiếp theo, Mytour sẽ giới thiệu về phương thức Stop trong jQuery để tạm dừng các hiệu ứng.

Nếu có bất kỳ thắc mắc hay câu hỏi nào cần giải đáp, bạn đọc có thể chia sẻ ý kiến trong phần bình luận dưới bài viết.