Demo : https://www.lenlop123.com/2020/09/143-fadein-fadeout-fadetoggle-fadeto.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<input id="btn_fadeOut" type="button" value="fadeOut">
<input id="btn_fadeIn" type="button" value="fadeIn">
<input id="btn_fadeToggle" type="button" value="fadeToggle">
<input id="btn_fadeTo" type="button" value="fadeTo">
<br><br>

<input id="btn_fadeOut_slow" type="button" value="fadeOut slow">
<input id="btn_fadeIn_slow" type="button" value="fadeIn slow">
<br><br>

<div style="background-color: red;width: 150px;height: 150px;">
  <div id="div_1" style="background-color: violet;width: 50px;height: 50px;"></div>
</div>



<script>
  // Ẩn tức thì
  $("#btn_fadeOut").click(function () {
    $("#div_1").fadeOut();
  });


  // Hiện tức thì
  $("#btn_fadeIn").click(function () {
    $("#div_1").fadeIn();
  });

  // fadeToggle
  $("#btn_fadeToggle").click(function () {
    $("#div_1").fadeToggle();
  });

  // fadeTo
  $("#btn_fadeTo").click(function () {
    $("#div_1").fadeTo("slow", 0.5);
  });

  // Ẩn slow
  $("#btn_fadeOut_slow").click(function () {
    $("#div_1").fadeOut(1000);
  });


  // Hiện slow
  $("#btn_fadeIn_slow").click(function () {
    $("#div_1").fadeIn(1000);
  });
</script>

1. Cú pháp fadeIn và fadeOut jQuery

Trước tiên hãy tham khảo cú pháp của hai hàm này đã nhé.

1
2
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,easing,callback)


Trong đó:

Bài viết này được đăng tại [free tuts .net]

  • speed là tốc độ ẩn hoặc hiện, đơn vị trính là miliseconds.
  • callback là hàm sẽ được gọi ngay sau khi hiệu ứng hoàn thành.
  • easing là tham số của hàm fadeOut, nó có hai giá trị.swing là hiệu ứng sẽ xảy ra tốc độ chậm ở thời điểm đầu và cuối. linear là hiển thị tốc độ đều ở mọi thời điểm. Tham số này là tùy chọn, mặc dù nó ở vị trí thứ 2 nhưng bạn có thể bỏ qua nó bằng cách sử dụng tham số callback ở vị trí 2.

Ví dụ: Áp dụng fadeIn và fadeOut vào thẻ HTML có id là result.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#result').fadeIn();
$('#result').fadeOut();
 
// Có tốc độ
$('#result').fadeIn("slow");
$('#result').fadeOut(3000);
 
// Có callback function
$('#result').fadeIn(1000, function(){
    alert("Done");
});
$('#result').fadeOut(1000, function(){
    alert("Done");
});

2. Ví dụ kết hợp fadeIn và fadeOut jQuery

Ví dụ 1: Viết chương trình khi click vào button thì ẩn và hiện các thẻ p.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    // Fadeing hiển thị thẻ p
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
     
    // Fading ẩn thẻ p
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});


Ví dụ 2: Vẫn là ví dụ như trên, nhưng hãy thảo thêm vài hiệu ứng kết hợp với tham số speed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
    // fadeOut với các speed khác nhau
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
     
    // Fading với các tốc độ khác nhau
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});

Như bạn thấy, mặc dù hai hiệu ứng này tương tự như hàm show và hide. Tuy nhiên, nếu nhìn kĩ thì bạn sẽ thấy nó ẩn và hiện nhẹ nhàng hơn nhiều.

Ví dụ 3: Bây giờ ta sẽ làm thêm ví dụ có áp dụng callback function nhé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
    // Hiển thị thông báo khi hiệu ứng fadeout hoàn thành
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            alert("fade-out hoàn thành.");
        });
    });
     
    // Hiển thị thông báo khi hiệu ứng fadein hoàn thành
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            alert("fade-in hoàn thành.");
        });
    });
});