Với jQuery bạn có thể fade một phần tử (giống show/hide nhưng thêm hiệu ứng fade).
jQuery có các phương thức fade sau đây:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn()
được dùng để hiển thị dần một phần tử đang ẩn.
Cú pháp:
$(selector).fadeIn(speed,callback);
Tham số speed chỉ định tốc độ hiding/showing, và có thể lấy các giá trị sau: "slow", "fast", hoặc milliseconds.
Tham số callback là chức năng sẽ được thực thi sau khi hoàn thành quá trình fade.
Ví dụ sau đây cho thấy phương thức fadeIn()
với các giá trị tham số khác nhau:
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut()
được dùng để hide dần một phần tử đang hiển thị.
Cú pháp:
$(selector).fadeOut(speed,callback);
Tham số speed chỉ định tốc độ hiding/showing, và có thể lấy các giá trị sau: "slow", "fast", hoặc milliseconds.
Tham số callback là chức năng sẽ được thực thi sau khi hoàn thành quá trình fade.
Ví dụ sau đây cho thấy phương thức fadeOut()
với các giá trị tham số khác nhau:
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle()
toggle giữa trạng thái fadeIn()
và fadeOut()
.
Nếu phần tử đang hide, fadeToggle()
sẽ fadeIn().
Nếu phần tử đang show, fadeToggle()
sẽ fadeOut().
Cú pháp:
$(selector).fadeToggle(speed,callback);
Tham số speed chỉ định tốc độ hiding/showing, và có thể lấy các giá trị sau: "slow", "fast", hoặc milliseconds.
Tham số callback là chức năng sẽ được thực thi sau khi hoàn thành quá trình fade.
Ví dụ sau đây cho thấy phương thức fadeToggle()
với các giá trị tham số khác nhau:
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo()
cho phép fade dần đến một độ mờ (opacity) nhất định (giá trị từ 0 đến 1).
Cú pháp:
$(selector).fadeTo(speed,opacity,callback);
Tham số speed chỉ định tốc độ hiding/showing, và có thể lấy các giá trị sau: "slow", "fast", hoặc milliseconds.
Tham số opacity trong fadeTo()
chỉ định mờ dần đến độ mờ cho trước (giá trị từ 0 đến 1).
Tham số callback là chức năng sẽ được thực thi sau khi hoàn thành quá trình fade.
Ví dụ sau đây cho thấy phương thức fadeTo()
với các giá trị tham số khác nhau:
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website