Show() và Hide() trong jQuery
Trong bài này chúng ta sẽ tìm hiểu hai hàm được dùng để tạo hiệu ứng ẩn và hiển thị trong jQuery, đó là hàm show() và hide().
Show() và hide() được dùng khá nhiều khi bạn làm việc với jQuery, nó giúp ẩn hoặc hiện thị một nội dung nào đó. Có thể là một thẻ div
, một thẻ input
, thậm chí là toàn bộ trang web.
Cú pháp hide và show trong jQuery
Hàm hide chỉ đơn giản là thiết lập thuộc tính CSS display:none
cho phần tử được chỉ định. Ngược lại, hàm show() sẽ khôi phục lại thuộc tính display, thường là display block
, inline
hoặc inline-block
.
Cú pháp như sau:
Trong đó:
selector
chính là các phẩn tử HTML được chỉ định.speed
là tốc độ ẩn và hiển thị. Mặc định là 0 nếu bạn không nhập.callback
là một hàm sẽ được gọi sau khi hàm hide hoặc hàm show thực hiện xong.
Ví dụ: Viết chương trình jQuery sử dụng hide() và show() để ẩn và hiện nội dung của các thẻ p.
Demo
2. Một vài ví dụ khác với hàm hide và show trong jQuery
Chúng ta sẽ làm thêm một vài demo khác nữa nhé.
Ví dụ 1: Ẩn / hiện thẻ div với tốc độ là 1 giây.
Demo
Đơn vị của thời gian là miliseconds nhé các bạn. 1 giây = 1000 miliseconds.
Ví dụ 2: Sử dụng các từ khóa về tốc độ "fast" và "slow".
fast = 200 miliseconds
slow = 600 miliseconds
Demo
Sử dụng hàm callback trong show và hide
Tham số callback chính là một hàm, hàm này sẽ được gọi ngay sau khi hàm show và hide kết thúc.
Ví dụ dưới đây sẽ hiển thị thông báo cho bạn biết là hai hàm show và hide đã hoàn thành.
Last updated