Review: DOM animation in jQuery

E-mail

jQuery cung cấp một số hàm cho hoạt ảnh và hiệu ứng, được liệt kê trong tài liệu của nó .

Thay đổi tầm nhìn

Để thay đổi tầm nhìn đơn giản, bạn có thể sử dụng hide()và show():
$("#pic").hide();
$("#pic").show(); (Xem ví dụ)

Bạn cũng có thể sử dụng toggle(), điều này sẽ quyết định hiển thị hay ẩn dựa trên trạng thái hiện tại: $("#pic").toggle(); (Xem ví dụ)

Bạn có thể chuyển thời lượng vào bất kỳ hàm nào trong số đó và jQuery sẽ tạo hiệu ứng thay đổi mức độ hiển thị: $("#pic").toggle(1000);

Bạn cũng có thể sử dụng slideDown(), slideUp()và slideToggle()cho các hiệu ứng trượt (xem ví dụ) hoặc fadeIn(), fadeOut()và fadeToggle()cho các hiệu ứng mờ dần (xem ví dụ) .

Bạn có thể truyền hàm gọi lại làm tham số thứ hai cho bất kỳ hàm nào trong số đó và jQuery sẽ gọi hàm gọi lại đó khi hoạt ảnh hoàn tất:

$("#pic").toggle(1000, function() {
    $("body").append("It's here!");
});

Bạn cũng có thể xâu chuỗi nhiều hiệu ứng lại với nhau và gọi delay()nếu bạn muốn độ trễ giữa chúng:

$("#pic").slideUp(300).delay().fadeIn();

Tùy chỉnh hiệu ứng

Nếu bạn muốn làm động các thuộc tính CSS cụ thể, bạn có thể sử dụng animate():

    $("#pic").animate({
       width: "70%",
       opacity: 0.7,
       padding: 20
    }, 1000);

Lưu ý rằng bạn chỉ có thể làm động các thuộc tính CSS lấy các giá trị số - vì vậy bạn không thể sử dụng thuộc tính này để làm động các thuộc tính như 'màu'. (Xem ví dụ)

Bạn cũng có thể đính kèm các chức năng gọi lại khác nhau animate(), nếu bạn muốn tìm hiểu khi hoạt ảnh đã hoàn tất hoặc đã hoàn tất. Kiểm tra tài liệu để biết thêm chi tiết.

Hoạt hình có trách nhiệm

Ảnh động phải luôn cải thiện trải nghiệm người dùng, không làm cho nó tệ hơn. Ảnh động sẽ giúp người dùng hiểu điều gì đó về trạng thái của ứng dụng web của bạn hoặc thêm một chút thú vị - họ không nên làm chậm trải nghiệm không cần thiết và làm người dùng thất vọng. Bạn có thể yêu cầu người dùng phản hồi về việc bạn sử dụng hình ảnh động hoặc làm việc với nhà thiết kế để quyết định cách thức và nơi để tạo hiệu ứng.

Nếu bạn biết người dùng của mình đang ở trên một thiết bị không hoạt động tốt với hình động, bạn có thể đặt $.fx.offthành true.