Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML với hiệu ứng phai màu

Bấm vào đây để HIỆN phần tử bên dưới

Bấm vào đây để ẨN phần tử bên dưới

Với hiệu ứng phai màu, chúng ta có bốn phương thức:

• fadeIn() - hiện phần tử với hiệu ứng phai màu.
• fadeOut() - ẩn phần tử với hiệu ứng phai màu.
• fadeToggle() - thực hiện luân phiên giữa việc hiện và ẩn phần tử với hiệu ứng phai màu.
• fadeTo() - thiết lập hiệu ứng phai màu cho phần tử.

Phương thức fadeIn() và phương thức fadeOut()

Phương thức fadeIn() dùng để hiện một phần tử HTML với hiệu ứng phai màu.

Phương thức fadeOut() dùng để ẩn một phần tử HTML với hiệu ứng phai màu.

Trong đó:

• Tham số time là khoảng thời gian của việc thực thi hiện/ẩn phần tử. Giá trị của tham số time có thể là:
• "slow" khoảng thời gian tương đối dài.
• "fast" khoảng thời gian tương đối ngắn.
• milliseconds (Ví dụ: 3000, 9000). Lưu ý: 1000 milliseconds = 1 giây
• Tham số callback là một hàm sẽ được thực thi sau khi việc hiện/ẩn phần tử đã được hoàn thành.

$("input[value='hien']").click(function(){
    $("#abc").fadeIn();
})
$("input[value='an']").click(function(){
    $("#abc").fadeOut();
})

$("input[value='hien']").click(function(){
    $("#abc").fadeIn(2000);
})
$("input[value='an']").click(function(){
    $("#abc").fadeOut(2000);
})

$("input[value='hien']").click(function(){
    $("#abc").fadeIn(function(){alert("HIỆN");});
})
$("input[value='an']").click(function(){
    $("#abc").fadeOut(function(){alert("ẨN");});
})

$("input[value='hien']").click(function(){
    $("#abc").fadeIn("slow", function(){alert("HIỆN");});
})
$("input[value='an']").click(function(){
    $("#abc").fadeOut("slow", function(){alert("ẨN");});
})

Phương thức fadeToggle()

Phương thức fadeToggle() dùng để thực hiện luân phiên giữa việc hiện và ẩn phần tử HTML với hiệu ứng phai màu.

Ví dụ:

• Khi phần tử đang bị ẩn, phương thức fadeToggle() sẽ hiện phần tử lên.
• Khi phần tử đang hiện, phương thức fadeToggle() sẽ ẩn phần tử đi.

$(selector).fadeToggle(time, callback);

$("button").click(function(){
    $("#abc").fadeToggle();
})

$("button").click(function(){
    $("#abc").fadeToggle(2000);
})

$("button").click(function(){
    $("#abc").fadeToggle(function(){alert("XONG");});
})

$("button").click(function(){
    $("#abc").fadeToggle("slow", function(){alert("XONG");});
})

Phương thức fadeTo()

Phương thức fadeTo() dùng để tạo hiệu ứng phai màu (mờ nhạt dần) cho một phần tử HTML. Click here

Trong đó:

• Tham số time là khoảng thời gian của hiệu ứng phai màu (giá trị có thể là: "slow", "fast", miliseconds).
• Tham số opacity là mức độ phai màu của phần tử (giá trị có thể nằm trong khoảng từ 0.0 đến 1.0).
• Tham số callback là một hàm sẽ được thực thi sau khi hiệu ứng phai màu được thực thi xong.

Lưu ý: Phương thức fadeTo() cần phải có ít nhất hai tham số time & opacity thì mới có thể hoạt động được.

$("button").click(function(){
    $("div").fadeTo(1500, 0.6);
})

$("button").click(function(){
     $("div").fadeTo(2000, 0.2, function(){alert("PHAI MÀU");});
})

Lưu ý: Phương thức fadeTo() chỉ làm cho phần tử bị phai màu, nó không làm phần tử bị ẩn đi.