Jquery Fade

Jquery fade là gì ?

Jquery fade là hiệu ứng làm mờ phần tử khi ẩn hay hiển thị. Ta có 4 phương thức như sau:

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

Jquery fadeIn()

Jquery fadeIn() dùng để hiển thị phần tử đang bị ẩn.

Cú pháp:

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

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức fadeIn() thực thi xong. Phần này sẽ được hướng dẫn cụ thể ở bài học sau.

Ví dụ:

$("button").click(function(){ $("#fade").fadeIn("slow"); });

Jquery fadeOut()

Jquery fadeOut() dùng để ẩn phần tử đang hiển thị.

Cú pháp:

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

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức fadeOut() thực thi xong. Phần này sẽ được hướng dẫn cụ thể ở bài học sau.

Ví dụ:

$("button").click(function(){ $("#fade").fadeOut("fast"); });

Jquery fadeToggle()

Jquery fadeToggle() là phương thức tổng hợp từ 2 phương thức fadeIn() và fadeOut().

- Nếu phần tử đang bị ẩn, thì fadeToggle() sẽ hiển thị nó lên.

- Nếu phần tử đang hiển thị, thì fadeToggle() sẽ ẩn nó đi.

Cú pháp:

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

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức fadeToggle() thực thi xong. Phần này sẽ được hướng dẫn cụ thể ở bài học sau.

Ví dụ:

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

Jquery fadeTo()

Jquery fadeTo() là phương thức làm mờ phần tử đến opacity chỉ định (giá trị từ 0 đến 1).

Cú pháp:

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

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số opacity: là độ mờ cho phần tử (giá trị từ 0 đến 1).

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức fadeTo() thực thi xong.

Ví dụ:

$("button").click(function(){ $("#fade").fadeTo(500, 0.4); });