Jquery Fade

28/09/2019

Bài sau » « Bài trước

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()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); });

Bài sau » « Bài trước
Back to top