Hiệu ứng jQuery Hide và Show

Chào mừng bạn quay lại với chuỗi học jQuery trên CodeTutHub! Ở bài trước, chúng ta đã tìm hiểu về jQuery Events và cách xử lý sự kiện. Hôm nay, chúng ta sẽ bước sang một phần thú vị hơn – tạo hiệu ứng với jQuery, bắt đầu với Hide (ẩn) và Show (hiện).

1. Giới thiệu về jQuery Hide và Show

jQuery cung cấp các phương thức đơn giản giúp ẩn hoặc hiển thị phần tử HTML trên trang bằng hiệu ứng mượt mà.

📌 Cú pháp:

$(selector).hide([duration], [callback]);
$(selector).show([duration], [callback]);

• duration(tùy chọn): thời gian hiệu ứng (ví dụ: "slow", "fast" hoặc mili giây như 1000)
• callback(tùy chọn): hàm sẽ thực thi sau khi hiệu ứng hoàn tất

2. Ví dụ 1: Ẩn và hiện nội dung cơ bản

<button id="btnHide">Ẩn nội dung</button>
<button id="btnShow">Hiện nội dung</button>

<div id="content" style="width:300px;padding:20px;background:#f1f1f1;margin-top:10px;">
  Đây là đoạn nội dung cần ẩn/hiện.
</div>

<script>
$("#btnHide").click(function() {
  $("#content").hide("slow");
});

$("#btnShow").click(function() {
  $("#content").show("slow");
});
</script>

3. Ví dụ 2: Toggle – Kết hợp Hide & Show

Thay vì dùng 2 nút, bạn có thể dùng 1 nút để ẩn nếu đang hiển thị hoặc hiển thị nếu đang ẩn.

<button id="btnToggle">Ẩn/Hiện</button>

<div id="box" style="width:200px;height:100px;background:lightgreen;margin-top:10px;">
  Hộp màu xanh lá.
</div>


<script>
$("#btnToggle").click(function() {
  $("#box").toggle("fast");
});
</script>

4. Ví dụ 3: Sử dụng Callback khi hiệu ứng hoàn tất

Bạn có thể thêm một hàm callback để thực hiện hành động sau khi hiệu ứng kết thúc.

<button id="btnHide">Ẩn nội dung</button>

<div id="content" style="width:300px; padding:20px; background:#e3f2fd; margin-top:10px;">
  Đây là nội dung sẽ được ẩn với hiệu ứng.
</div>

<script>
$("#btnHide").click(function() {
  $("#content").hide(2000, function() {
    alert("Đã ẩn xong nội dung!");
  });
});
</script>

Giải thích ví dụ:

• $("#btnHide"): chọn nút có id="btnHide".
• .click(function() {...}): gán sự kiện click.
• $("#content").hide(1000, callback): ẩn thẻ #content trong 1 giây (1000ms).
• function() { alert(...) }: hàm callback – sẽ chạy sau khi hiệu ứng hide hoàn tất.

Tại sao nên dùng callback?

Hàm callback giúp bạn:

• Biết chắc chắn hiệu ứng đã kết thúc.
• Thực hiện các hành động kế tiếp như hiển thị thông báo, thay đổi nội dung, chuyển hướng...

5. Các giá trị duration phổ biến

6. Tổng kết

• hide() và show() là hiệu ứng đơn giản, được dùng rất nhiều để điều khiển giao diện động.
• Bạn có thể điều chỉnh tốc độ và gắn thêm hành động sau hiệu ứng với callback.
• Với toggle(), bạn có thể viết code ngắn gọn hơn khi cần ẩn/hiện linh hoạt.

👉 Tiếp theo: Ở bài sau, chúng ta sẽ học các hiệu ứng nâng cao hơn như fadeIn, fadeOut, slideUp, slideDown... để giúp trang web sống động hơn nữa!

📚 codetuthub.com – Học code từ thực chiến, dễ hiểu, dễ nhớ!
Đừng quên để lại câu hỏi hoặc bình luận bên dưới nhé!