Jquery Fade
28/09/2019
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);
});