Chúng tôi đang gặp khó khăn trong việc tải các tài nguyên bên ngoài có trên trang web.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Nội dung chính

Ôn tập: Hiệu ứng hoạt hình trong jQuery

jQuery cung cấp một số hàm để thực hiện hiệu ứng hoạt hình và các hiệu ứng khác, bạn có thể xem thông tin về các hiệu ứng này trong tài liệu tham khảo.

Thay đổi chế độ hiển thị

Đối với những thao tác thay đổi chế độ hiển thị đơn giản, ta có thể sử dụng phương thức hide()show() để ẩn hoặc hiện phần tử:
$("#pic").hide();
$("#pic").show(); (Xem ví dụ)
Ta cũng có thể sử dụng toggle(), phương thức này quyết định việc hiển thị hay ẩn các phần tử dựa trên trạng thái hiện tại: $("#pic").toggle(); (Xem ví dụ)
Ta có thể truyền thời gian vào các hàm trên để jQuery tạo hiệu ứng thay đổi theo thời gian: $("#pic").toggle(1000);
Ta cũng có thể sử dụng hàm slideDown(), slideUp()slideToggle() để tạo hiệu chuyển trang (Xem ví dụ) hoặc sử dụng hàm fadeIn(), fadeOut()fadeToggle() để tạo hiệu ứng mờ/hiện dần (Xem ví dụ).
Ta có thể truyền một hàm callback làm tham số thứ hai cho bất kỳ hàm nào ở trên, jQuery sẽ gọi hàm callback khi hiệu ứng hoạt hình kết thúc:
$("#pic").toggle(1000, function() {
    $("body").append("It's here!");
});
Ta cũng có thể ghép chuỗi các hiệu ứng lại với nhau và gọi hàm delay() để tạo khoảng nghỉ hay độ trễ giữa các hiệu ứng:
$("#pic").slideUp(300).delay().fadeIn();

Tuỳ chỉnh hiệu ứng hoạt hình

Nếu muốn tạo hiệu ứng hoạt hình cho các thuộc tính CSS, ta có thể sử dụng hàm animate():
    $("#pic").animate({
       width: "70%",
       opacity: 0.7,
       padding: 20
    }, 1000);
Lưu ý, ta chỉ có thể tạo hiệu ứng hoạt hình cho các thuộc tính CSS nhận giá trị số, vì vậy ta không thể sử dụng hàm này để tạo hiệu ứng cho các thuộc tính như "color" (màu sắc). (Xem ví dụ)
Ta cũng có thể gán nhiều hàm callback khác nhau vào trong hàm animate() để biết hiệu ứng hoạt hình đang chạy đến đâu và sẽ kết thúc khi nào. Xem tài liệu tham khảo để biết thêm chi tiết.

Dùng hiệu ứng hoạt hình một cách có trách nhiệm

Hãy lưu ý mục đích của hiệu ứng hoạt hình là để cải thiện trải nghiệm của người dùng chứ không phải làm trải nghiệm của họ trở nên tồi tệ hơn. Hiệu ứng hoạt hình phải giúp người dùng hiểu được về trạng thái của ứng dụng hoặc khiến họ cảm thấy thích thú khi tương tác, thay vì cản trở và gây phiền hà cho người dùng. Ta có thể lấy phản hồi từ người dùng về các hiệu ứng hoạt hình đang được sử dụng hoặc làm việc với nhà thiết kế trang web để quyết định cách thức và vị trí nên tạo hiệu ứng hoạt hình.
Nếu thiết bị của người dùng có nhiều hạn chế trong việc xử lý hoạt ảnh, ta có thể thêm thuộc tính $.fx.off nhận giá trị true trong phần lập trình.

Tham gia cuộc thảo luận?

Chưa có bài đăng nào.
Bạn có hiểu Tiếng Anh không? Bấm vào đây để thấy thêm các thảo luận trên trang Khan Academy Tiếng Anh.