Chào mừng bạn quay lại với chuỗi học jQuery trên codetuthub.com! Sau khi đã làm quen với hide() và show() trong bài trước, hôm nay chúng ta sẽ khám phá các hiệu ứng nâng cao hơn trong jQuery: fadeIn, fadeOut, slideUp, slideDown – giúp giao diện của bạn mượt mà và sống động hơn.

1. Giới thiệu hiệu ứng Fade và Slide

jQuery cung cấp nhiều hàm hiệu ứng để hiển thị và ẩn phần tử với hiệu ứng mượt:

  • fadeIn() / fadeOut() – hiệu ứng mờ dần xuất hiện hoặc biến mất.
  • slideDown() / slideUp() – hiệu ứng trượt xuống hoặc trượt lên.

Tất cả đều hỗ trợ:

  • duration (thời gian): "slow", "fast" hoặc mili giây (vd: 500)
  • callback: hàm thực thi khi hoàn tất

2. Ví dụ: fadeIn và fadeOut

html
Thử online
<button id="btnFadeOut">Mờ dần (fadeOut)</button>
<button id="btnFadeIn">Hiện dần (fadeIn)</button>

<div id="boxFade" style="width:200px; height:100px; background:lightcoral; margin-top:10px;">
  Hộp hiệu ứng Fade
</div>

<script>
$("#btnFadeOut").click(function() {
  $("#boxFade").fadeOut("slow");
});

$("#btnFadeIn").click(function() {
  $("#boxFade").fadeIn("slow");
});
</script>

3. Ví dụ: slideUp và slideDown

html
Thử online
<button id="btnSlideUp">Trượt lên (slideUp)</button>
<button id="btnSlideDown">Trượt xuống (slideDown)</button>

<div id="boxSlide" style="width:200px; height:100px; background:lightseagreen; margin-top:10px;">
  Hộp hiệu ứng Slide
</div>

<script>
$("#btnSlideUp").click(function() {
  $("#boxSlide").slideUp("fast");
});

$("#btnSlideDown").click(function() {
  $("#boxSlide").slideDown("fast");
});
</script>

4. Gộp hiệu ứng: Fade Toggle & Slide Toggle

jQuery còn cung cấp:

  • fadeToggle(): nếu đang hiện thì mờ dần ẩn đi, nếu đang ẩn thì mờ dần hiện ra.
  • slideToggle(): trượt lên nếu đang hiện, trượt xuống nếu đang ẩn.
html
Thử online
<button id="btnFadeToggle">Fade Toggle</button>
<button id="btnSlideToggle">Slide Toggle</button>

<div id="boxToggle" style="width:200px; height:100px; background:lightskyblue; margin-top:10px;">
  Hộp Toggle
</div>

<script>
$("#btnFadeToggle").click(function() {
  $("#boxToggle").fadeToggle(600);
});

$("#btnSlideToggle").click(function() {
  $("#boxToggle").slideToggle(600);
});
</script>

5. Callback: Thực thi sau khi hoàn tất hiệu ứng

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

html
Thử online
<button id="btnFadeOut">Ẩn dần hộp</button>

<div id="boxFade" style="width:250px; height:100px; background:lightpink; margin-top:10px; padding:15px;">
  Đây là hộp sẽ được ẩn dần bằng hiệu ứng fadeOut trong 1 giây.
</div>

<script>
$("#btnFadeOut").click(function() {
  $("#boxFade").fadeOut(1000, function() {
    alert("Hộp đã mờ dần và biến mất!");
  });
});
</script>

Giải thích:

  • $("#btnFadeOut"): chọn nút có ID btnFadeOut.
  • .click(...): gán sự kiện khi nút được click.
  • $("#boxFade").fadeOut(1000, callback): áp dụng hiệu ứng mờ dần trong 1 giây (1000ms).
  • function() { alert(...) }: callback function được thực hiện sau khi hiệu ứng kết thúc.

6. Tổng kết

Hàm jQueryChức năng
fadeIn()Hiện dần phần tử
fadeOut()Ẩn dần phần tử
slideDown()Trượt phần tử xuống để hiện
slideUp()Trượt phần tử lên để ẩn
fadeToggle()Chuyển đổi ẩn/hiện với hiệu ứng mờ
slideToggle()Chuyển đổi trượt lên/xuống

👉 Bài tiếp theo: Chúng ta sẽ tìm hiểu về jQuery Animation – tuỳ biến hiệu ứng nâng cao hơn nữa!
Tiếp tục theo dõi tại codetuthub.com để không bỏ lỡ!

📚 codetuthub.com – Học code từ thực chiến, dễ hiểu, dễ nhớ!