Bài jQuery 7: Hiệu ứng Show và Hide trong jQuery

0
122

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 Show và Hide trong jQuery.

Các phương thức jQuery show() và hide()

Bạn có thể hiển thị và ẩn các phần tử HTML bằng cách sử dụng các phương thức jQuery show() hide().

Phương thức hide() chỉ đơn giản là bạn style inline là: display: none cho các phần tử được chọn. Ngược lại, phương thức show() khôi phục lại các thuộc tính hiển thị của các phần tử như ban đầu. Dưới đây là đoạn code ví dụ về việc ẩn hoặc hiện một phần tử.

Bạn có thể tùy ý chỉ định tham số thời lượng (còn được gọi là tốc độ) để làm cho hiệu ứng ẩn chương trình jQuery hoạt động trong một khoảng thời gian xác định.

Độ dài 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 để có độ chính xác cao hơn; giá trị cao hơn cho thấy hình ảnh động chậm hơn.

Phương thức toggle()

Phương thức jQuery toggle() hiển thị hoặc ẩn các phần tử theo cách mà nếu phần tử được hiển thị ban đầu, nó sẽ bị ẩn đi; nếu bị ẩn, nó sẽ được hiển thị (nghĩa là bật tắt khả năng hiển thị).

Ví dụ:

Tương tự, bạn có thể chỉ định tham số thời lượng cho phương thức toggle() để làm cho nó hoạt động giống như các phương thức show()hide().

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 Show và Hide 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 Fade 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