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

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();
})
Xem ví dụ
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);
})
Xem ví dụ
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”);});
})
Xem ví dụ
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”);});
})
Xem ví dụ
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();
})
Xem ví dụ
Ví dụ 2
Chỉ sử dụng tham số time

$(“button”).click(function(){
$(“#abc”).fadeToggle(2000);
})
Xem ví dụ
Ví dụ 3
Chỉ sử dụng tham số callback

$(“button”).click(function(){
$(“#abc”).fadeToggle(function(){alert(“XONG”);});
})
Xem ví dụ
Ví dụ 4
Sử dụng tham số time và callback

$(“button”).click(function(){
$(“#abc”).fadeToggle(“slow”, function(){alert(“XONG”);});
})
Xem ví dụ
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

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);
})
Xem ví dụ
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”);});
})
Xem ví dụ
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.

Học JQuery