Khám Phá Hiệu Ứng Mờ Dần và Hiện Ra trong jQuery

Khám Phá Hiệu Ứng Mờ Dần và Hiện Ra trong jQuery

Tiếp tục theo dõi bài học jQuery dưới đây của Mytour để hiểu rõ về hiệu ứng Mờ Dần và Hiện Ra trong jQuery.

1. Hiệu Ứng fadeIn() và fadeOut() trong jQuery

Bên cạnh những phương thức hide() và show(), chúng ta có thể áp dụng những phương thức fadeIn() và fadeOut() trong jQuery để hiển thị hoặc ẩn các phần tử HTML thông qua hiệu ứng tăng giảm độ sáng.

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

Kết quả xuất hiện như bên dưới:

Tương tự như những phương thức hiệu ứng khác trong jQuery, ta có thể điều chỉnh tham số thời lượng của các phương thức fadeIn() và fadeOut() để kiểm soát thời gian của hiệu ứng động.

Để điều chỉnh tham số thời lượng, ta có thể sử dụng một trong các chuỗi như 'nhanh' hoặc 'chậm', được định nghĩa trước, hoặc sử dụng thời gian tính bằng mili giây. Giá trị càng lớn, tốc độ hiển thị hiệu ứng động sẽ càng chậm.

Ví dụ: Dưới đây là minh họa về cách điều chỉnh thời lượng của hiệu ứng động:

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

Chú ý: Đơn giản, hiệu ứng của các phương thức fadeIn() / fadeOut() tương tự như các phương thức show() / hide(), nhưng khác biệt ở chỗ fadeIn() / fadeOut() làm mờ dần / tăng dần hiệu ứng của các phần tử đích.

Tương tự, ta có thể chỉ định một hàm callback để 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, ta sẽ chỉ định một hàm callback để thực thi sau khi các phương thức fadeIn() / fadeOut() hoàn tất:

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

2. Sử dụng phương thức fadeToggle() trong jQuery

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

Ví dụ: Dưới đây là một ví dụ minh họa về 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:

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

Bên cạnh đó, chúng ta cũng có khả năng đặt tham số thời lượng cho phương thức fadeToggle(), giống như các phương thức fadeIn() / fadeOut(), để kiểm soát thời gian hiển thị ảnh động.

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

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

Tương tự, có khả năng xác định một callback cho phương thức fadeToggle ().

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

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

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

Về bản chất, phương thức fadeTo() trong jQuery giống như phương thức .fadeIn(), nhưng cho phép làm mờ phần tử đến mức độ cụ thể.

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

Tham số opacity là bắt buộc, chỉ định độ mờ của phần tử đích, có thể là một số từ 0 đến 1. Phương thức cũng yêu cầu tham số thời lượng để xác định tốc độ làm mờ ảnh động.

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

Dưới đây là kết quả cuối cùng:

Chúng ta vừa khám phá cùng Mytour về các hiệu ứng Fade in và Fade out trong jQuery. Bài học kế tiếp sẽ mang đến cho bạn những điều mới mẻ về hiệu ứng trượt trong jQuery.

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