jQuery hiệu ứng - phương thức animate()

Hướng dẫn tham khảo hiệu ứng jQuery

Mô hình

Thay đổi chiều cao của phần tử "div":

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Thử ngay

Định nghĩa và cách sử dụng

Phương thức animate() thực hiện hoạt hình tùy chỉnh của tập hợp thuộc tính CSS.

Phương pháp này thông qua CSS样式 để thay đổi trạng thái của phần tử từ trạng thái này sang trạng thái khác. Giá trị thuộc tính CSS thay đổi dần dần, từ đó tạo ra hiệu ứng hoạt hình.

Chỉ có giá trị số mới có thể tạo hoạt hình (ví dụ "margin:30px"). Giá trị chuỗi không thể tạo hoạt hình (ví dụ "background-color:red").

Ghi chú:Sử dụng "+=" hoặc "-=" để tạo hoạt hình tương đối (relative animations).

Ngữ pháp 1

$().animate(styles,speed,easing,callback)
Các tham số Mô tả
styles

Yêu cầu. Quy định CSS và giá trị tạo hiệu ứng hoạt hình.

Giá trị CSS có thể (cung cấp ví dụ):

Ghi chú:CSS样式 sử dụng tên DOM (ví dụ "fontSize") để thiết lập, không phải tên CSS (ví dụ "font-size").
speed

Tùy chọn. Quy định tốc độ animation. Mặc định là "normal".

Các giá trị có thể:

  • miliseconds (ví dụ 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Tùy chọn. Quy định hàm easing để thiết lập tốc độ animation tại các điểm animation khác nhau.

Các hàm easing tích hợp sẵn:

  • swing
  • linear

Cung cấp thêm các hàm easing trong các plugin mở rộng.
callback

Tùy chọn. Hàm cần thực hiện sau khi hàm animate hoàn thành.

Nếu muốn học thêm về callback, hãy truy cập trang web của chúng tôi jQuery Callback Chương này.

Giao thức 2

$().animate(styles,options)
Các tham số Mô tả
styles Bắt buộc. Quy định các樣式 CSS và giá trị tạo ra hiệu ứng animation (như trên).
options

Tùy chọn. Quy định các tùy chọn thêm cho animation.

Các giá trị có thể:

  • speed - thiết lập tốc độ animation
  • easing - quy định hàm easing cần sử dụng
  • callback - quy định hàm cần thực hiện sau khi animation hoàn thành
  • step - quy định hàm cần thực hiện sau khi animation hoàn thành mỗi bước
  • queue - giá trị boolean. Chỉ ra liệu animation có được đặt vào hàng đợi animation hay không. Nếu là false, animation sẽ bắt đầu ngay lập tức
  • specialEasing - từ styles Định nghĩa ánh xạ của một hoặc nhiều thuộc tính CSS và hàm easing tương ứng của chúng

Hướng dẫn tham khảo hiệu ứng jQuery