Bài jQuery 8: Hiệu ứng Fade trong jQuer

0
278

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 hiệu ứng Fade trong jQuery.

Các phương thức fadeIn() và fadeOut()

Bạn có thể sử dụng các phương thức jQuery fadeIn()fadeOut() để hiển thị hoặc ẩn các phần tử HTML bằng cách tăng dần hoặc giảm độ mờ của chúng.

Ví dụ:

Giống như các phương thức hiệu ứng jQuery khác, bạn có thể tùy ý chỉ định thời lượng hoặc tham số tốc độ cho các phương thức fadeIn()fadeOut() để kiểm soát thời gian hành động ảnh mờ 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;

Ví dụ:

Bạn cũng có thể chỉ định một hàm callback được thực thi sau khi phương thức fadeIn() hoặc fadeOut().

Phương thức fadeToggle()

Phương thức jQuery fadeToggle() hiển thị hoặc ẩn các phần tử được chọn bằng cách kích hoạt độ mờ của chúng theo cách mà nếu phần tử được hiển thị ban đầu, nó sẽ bị mờ dần; nếu bị ẩn, nó sẽ bị mờ dần (nghĩa là bật tắt hiệu ứng mờ dần).

Ví dụ:

Tương tự, bạn có thể chỉ định tham số thời lượng cho phương thức fadeToggle() như phương thức fadeIn() / fadeOut() để kiểm soát thời lượng hoặc tốc độ của chuyển động fade.

Ví dụ:

Phương thức fadeTo()

Phương thức fadeTo() tương tự như phương thức .fadeIn(), nhưng khác .fadeIn () ở chỗ phương thức fadeTo() cho phép bạn làm mờ dần các phần tử ở mức độ mờ nhất định.

Tham số opacity được yêu cầu chỉ định độ mờ cuối cùng của các phần tử đích có thể là một số trong khoảng từ 0 đến 1. Thông số thời lượng hoặc tốc độ cũng được yêu cầu cho phương thức này chỉ định thời lượng mờ dần.

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 Hiệu ứng Fade trong jQuery. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Hiệu ứng Slide 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