Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery, cách làm phần tử mờ nhạt phai màu dần trong jquery, cách sử dụng hàm phương thức fadeIn(), fadeOut(), fadeToggle(), fadeTo()

Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery, cách làm phần tử mờ nhạt phai màu dần trong jquery, cách sử dụng hàm phương thức fadeIn(), fadeOut(), fadeToggle(), fadeTo()

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.

Cú pháp

$(selector).fadeIn(time, callback);
$(selector).fadeOut(time, callback);

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.
Ví dụ 1

HIỆN/ẨN phần tử với hiệu ứng phai màu (không sử dụng tham số)


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

HIỆN/ẨN phần tử với hiệu ứng phai màu (chỉ sử dụng tham số time)


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

HIỆN/ẨN phần tử với hiệu ứng phai màu (chỉ sử dụng tham số callback)


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

HIỆN/ẨN phần tử với hiệu ứng phai màu (sử dụng tham số time và callback)


$("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.
Cú pháp

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

Cách sử dụng tham số "time" và "callback" giống như trong phương thức fadeIn() và fadeOut()

Ví dụ 1

Không sử dụng tham số


$("button").click(function(){
    $("#abc").fadeToggle();
})
Ví dụ 2

Chỉ sử dụng tham số time


$("button").click(function(){
    $("#abc").fadeToggle(2000);
})
Ví dụ 3

Chỉ sử dụng tham số callback


$("button").click(function(){
    $("#abc").fadeToggle(function(){alert("XONG");});
})
Ví dụ 4

Sử dụng tham số time và callback


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

Cú pháp

$(selector).fadeTo(time, opacity, callback);

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.

Ví dụ 1

Tạo hiệu ứng phai màu cho phần tử (chỉ sử dụng hai tham số)


$("button").click(function(){
    $("div").fadeTo(1500, 0.6);
})
Ví dụ 2

Tạo hiệu ứng phai màu cho phần tử (sử dụng cả ba tham số)


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

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

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi