Ưu điểm của Hiệu ứng Trượt trong jQuery

Khám phá Hiệu ứng Trượt độc đáo trong jQuery

Hãy đọc bài viết dưới đây của Mytour để hiểu rõ về Hiệu ứng Trượt trong jQuery. Ngoài ra, bạn cũng có thể tham khảo thêm một số bài học khác về jQuery để tìm hiểu về Selector và các hiệu ứng khác.

1. Cách sử dụng slideUp() và slideDown() trong jQuery

Phương thức slideUp() và slideDown() trong jQuery thường được dùng để ẩn hoặc hiển thị các phần tử HTML bằng cách thay đổi chiều cao một cách mượt mà (trượt lên hoặc xuống).

Mô phỏng: Dưới đây là ví dụ minh họa cách áp dụng slideUp() và slideDown() trong jQuery để ẩn hoặc hiển thị phần tử HTML:

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

Giống như các phương thức tạo hiệu ứng khác trong jQuery, chúng ta có khả năng điều chỉnh thời gian thực hiện cho slideUp() và slideDown() để kiểm soát tốc độ của hiệu ứng.

Để điều chỉnh thời gian, bạn có thể sử dụng chuỗi 'slow' hoặc 'fast' đã được định nghĩa trước, hoặc chỉ định thời gian bằng mili giây - giá trị càng cao, hiệu ứng chạy càng chậm.

Ví dụ: Dưới đây là một ví dụ minh họa về cách điều chỉnh thời lượng cho slideUp() và slideDown():

Kết quả xuất hiện sẽ có dạng như sau:

Hơn nữa, chúng ta có khả năng xác định một hàm callback để thực hiện sau khi slideUp() hoặc slideDown() kết thúc, như ví dụ sau đây:

Kết quả xuất hiện sẽ giống như bên dưới:

2. Sử dụng slideToggle() trong jQuery

Phương thức slideToggle() của jQuery được sử dụng để hiển thị hoặc ẩn các phần tử được chọn. Nếu phần tử đang hiển thị, nó sẽ trượt lên; nếu đang ẩn, nó sẽ trượt xuống. Nói cách khác, nó là sự kết hợp giữa slideUp() và slideDown().

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

Kết quả xuất hiện sẽ có dạng như sau:

Tương tự, bạn cũng có thể đặt thời gian cho phương thức slideToggle(), như các phương thức slideUp() và slideDown(), để kiểm soát tốc độ của hiệu ứng chuyển động slide.

Ví dụ: Dưới đây là một ví dụ về cách đặt thời gian cho phương thức slideToggle():

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

Bên cạnh đó, chúng ta cũng có khả năng chỉ định hàm callback cho phương thức slideToggle(). Hãy xem ví dụ dưới đây:

Kết quả xuất hiện sẽ có dạng tương tự như sau:

Ở đây, Mytour đã giới thiệu về các hiệu ứng slide trong jQuery. Bạn cũng có thể tham khảo thêm nhiều bài học khác trên Mytour để hiểu rõ hơn về cách ẩn hiện các phần tử HTML bằng jQuery.

Trong bài học kế tiếp, Mytour sẽ tiếp tục giới thiệu về hiệu ứng động trong jQuery.