BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

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

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

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

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Top