Hiệu ứng Fade in và Fade out trong jQuery

Trong bài học dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về các hiệu ứng Fade in và Fade out trong jQuery, ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách ẩn hiện các phần tử HTML bằng các phương thức hide() và show() trong jQuery.

hieu ung fade in va fade out trong jquery

Hiệu ứng Fade in và Fade out trong jQuery

 

Tham khảo tiếp bài học jQuery dưới đây của Taimienphi.vn để tìm hiểu chi tiết về các hiệu ứng Fade in và Fade out trong jQuery.

Mục Lục bài viết:
1. Các phương thức fadeIn() và fadeOut() trong jQuery
2. Phương thức fadeToggle() trong jQuery
3. Phương thức fadeTo() trong jQuery

 

1. Các phương thức fadeIn() và fadeOut() trong jQuery

Ngoài các phương thức hide()show(), chúng ta có thể sử dụng các phương thức fadeIn()fadeOut() trong jQuery để hiển thị hoặc ẩn các phần tử HTML bằng cách tăng dần hoặc giảm dần các hiệu ứng.

Ví dụ: ví dụ dưới đây minh họa cách sử dụng các phương thức fadeIn() và fadeOut() trong jQuery để ẩn và hiện các phần tử HTML:

hieu ung fade in va fade out trong jquery

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 2

Cũng giống như các phương thức hiệu ứng khác trong jQuery, chúng ta có thể tùy chỉnh tham số thời lượng cho các phương thức fadeIn() và fadeOut() để kiểm soát thời gian ảnh động chạy.

Để tùy chỉnh tham số thời lượng, chúng ta sẽ sử dụng một trong các chuỗi "fast" hoặc "slow" được xác định trước hoặc thời gian được tính bằng mili giây, giá trị càng cao tốc độ hiển thị ảnh động càng chậm.

Ví dụ: ví dụ dưới đây minh họa cách tùy chỉnh thời lượng ảnh động chạy:

hieu ung fade in va fade out trong jquery 3

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 4

Lưu ý: Về cơ bản hiệu ứng các phương thức fadeIn() / fadeOut() tương tự như các phương thức show() / hide(), chỉ khác các phương thức fadeIn() / fadeOut() sẽ làm mờ dần / tăng dần hiệu ứng các phần tử đích.

Tương tự, chúng ta cũng có thể chỉ định một hàm callback được thực thi sau khi các phương thức fadeIn() / fadeOut() hoàn tất.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ chỉ định một hàm callback được thực thi sau khi các phương thức fadeIn() / fadeOut() hoàn tất:

hieu ung fade in va fade out trong jquery 5

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 6

 

2. Phương thức fadeToggle() trong jQuery

Phương thức fadeToggle() trong jQuery hiển thị hoặc ẩn các phần tử được chọn bằng cách kích hoạt các hiệu ứng mờ dần (hoặc tăng dần) theo cách nếu các phần tử ban đầu được hiển thị thì hiệu ứng sẽ mờ dần, hoặc nếu ban đầu được bị ẩn thì phần tử đó sẽ được hiển thị hiệu ứng tăng dần.

Ví dụ: ví dụ dưới đây minh họa cách sử dụng phương thức fadeToggle() trong jQuery hiển thị hoặc ẩn các phần tử được chọn:

hieu ung fade in va fade out trong jquery 7

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 8

Ngoài ra chúng ta cũng có thể chỉ định tham số thời lượng cho phương thức fadeToggle() tương tự như các phương thức fadeIn() / fadeOut() để kiểm soát thời gian ẩn hiện ảnh động.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ chỉ định tham số thời lượng để kiểm soát thời gian ẩn hiện ảnh động:

hieu ung fade in va fade out trong jquery 9

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 10

Tương tự, chúng ta cũng có thể chỉ định hàm callback cho phương thức fadeToggle ().

Ví dụ: tham khảo ví dụ dưới đây để tìm hiểu cách chỉ định hàm callback cho phương thức fadeToggle ():

hieu ung fade in va fade out trong jquery 11

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 12

 

3. Phương thức fadeTo() trong jQuery

Về cơ bản phương thức fadeTo() trong jQuery tương tự như phương thức .fadeIn(), chỉ khác phương thức fadeTo() cho phép người dùng làm mờ các phần tử đến một mức độ cụ thể.

$(selector).fadeTo(speed, opacity, callback);

Tham số opacity bắt buộc chỉ định độ mờ cho các phần tử đích có thể là một số trong khoảng từ 0 đến 1. Ngoài ra phương thức này cũng yêu cầu tham số thời lượng để chỉ định thời lượng ảnh động sẽ mờ dần.

Ví dụ: trong ví dụ dưới đây minh họa cách sử dụng phương thức fadeTo() trong jQuery:

hieu ung fade in va fade out trong jquery 13

Kết quả đầu ra có dạng như dưới đây:

hieu ung fade in va fade out trong jquery 14

Trên đây bạn đọc vừa cùng Taimienphi.vn tìm hiểu về các hiệu ứng Fade in và Fade out trong jQuery. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về hiệu ứng slide trong jQuery.

https://thuthuat.taimienphi.vn/hieu-ung-fade-in-va-fade-out-trong-jquery-51485n.aspx
Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Đỗ Bá Hưng     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Phương thức stop() trong jQuery
jQuery là gì? Cách sử dụng jQuery kèm ví dụ chi tiết
Phương thức Getter và Setter trong jQuery
Tự học Selector trong jQuery
Event (sự kiện) trong jQuery
Từ khoá liên quan:

Hiệu ứng Fade in và Fade out trong jQuery

, jQuery, học jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới

  • Hadoop là gì?

    Hadoop là gì? Các thành phần, hệ sinh thái và cấu trúc Hadoop như thế nào? Bạn đọc cùng tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết nhé.

  • Học jQuery, tài liệu tự học lập trình jQuery

    JQuery là thư viện JavaScript đa tính năng, hỗ trợ đắc lực cho những người lập trình web, học jQuery thành thạo, bạn sẽ code ít hơn và được cập nhật liên tục các công nghệ mới nhất.

  • Thiết lập kích thước phần tử trong jQuery

    Để tìm hiểu các phương thức thiết lập kích thước phần tử trong jQuery, bạn đọc cùng tham khảo tiếp bài viết dưới đây của Taimienphi.vn, ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm về phương thức lấy và thiết lập các thuộc tính CSS trong jQuery.

  • Cách nhận Spin Coin Master 16/1/2024 miễn phí mới nhất

    Tổng hợp link spin Coin Master 16/1 chính thức của Moon Active phát hành nhận thưởng vòng quay và vàng miễn phí đều nằm bên dưới, mỗi liên kết spin link 16/1/2024 đều hoạt động ổn định. Mới đây Coin Master đã cán mốc 22 triệu lượt người theo dõi trên mạng xã hội Facebook.