Tự học JQuery - Hiệu Ứng - Bài 2 – Nhạt dần

Xem Mục lục lập trình JQuery

Với jQuery bạn có thể làm nhạt dần và biến mất các phần tử bằng các phương thức sau:

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
  

Phương thức fadeIn()

Phương thức fadeIn() dùng làm 01 phần tử xuất hiện (đậm dần)

Cú pháp:

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

Tham số speed gồm các giá trị sau:"slow", "fast", hoặc milliseconds.

Tham số callback là 01 hàm thực thi sau khi phương thức fadeIn hoàn thành.

Ví dụ sau mô tả 03 tham số khác nhau của phương thức fadeIn()

P/S: nên ẩn đối tượng (hide) rồi hãy chạy fadeIn thì sẽ thấy rõ hiệu ứng hơn.

Ví dụ:

$("button").click(function(){
    $("#div1").fadeIn();
    //$("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

Phương thức fadeOut()

Phương thức fadeOut() dùng làm biến mất 01 phần tử (nhạt dần).

Cú pháp:

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

Tham số speed xác định thời gian kéo dài của hiệu ứng.

Gồm các tham số sau: "slow", "fast", hoặc milliseconds.

Tham số callback là 01 hàm được thực thi sau khi phương thức fadeOut hoàn thành.

Ví dụ sau mô tả các tham số khác nhau của phương thức fadeOut()

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

Phương thức fadeToggle()

Phương thức fadeToggle() bật tắt giữa 02 phương thức fadeIn() và fadeOut()

Nếu phần tử đang ẩn thì sẽ đậm dần => xuất hiện và ngược lại.

Cú pháp:

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

Tham số speed xác định thời lượng hiệu ứng diễn ra.Gồm các giá trị sau: "slow", "fast", hoặc milliseconds.

Tham số callback la 01 hàm được thực thi sau khi hiệu ứng diễn ra xong.

Ví dụ sau mô tả phương thức fadeToggle() với các thông số khác nhau:

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

Phương thức fadeTo()

Phương thức fadeTo() làm mờ dần 01 phần tử đến 01 cấp độ trong suốt cho sẵn(từ 0 đến 1).

Cú pháp:

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

Tham số speed xác định thời lượng của hiệu ứng. Gồm các giá trị sau: "slow", "fast", hoặc milliseconds.

Tham số callback là 01 hàm được thực thi sau khi hoàn thành hiệu ứng.

Ví dụ sau mô tả phương thức fadeTo() với các tham số:

P/S: Cho dù opacity=0 thì phần tử vẫn không bị mất đi (hide) như các phương thức trên.

$("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
});

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM