fadeIn() và fadeOut() trong jQuery

Trong bài này chúng ta sẽ tìm hiểu hàm fadeIn và fadeOut trong jQuery, hai hàm này dùng để hiển thị hoặc ẩn các thẻ HTML với hiệu ứng mờ dần rất đẹp mắt.

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ dần rất tự nhiên, còn show và hide thì sẽ bị kéo về một góc. Nhưng xét về công dụng thì cả hai đều là những hiệu ứng ẩn / hiện các đối tượng html.

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é.

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

Trong đó:

  • 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.

$('#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.

$(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.

$(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é.

$(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.");
        });
    });
});

Như vậy là chúng ta đã tìm hiểu xong cách sử dụng hàm fadeIn và fadeOut trong jQuery để tạo các hiệu ứng ẩn / hiện các thẻ HTML.

Bài liên quan