Phương thức jQuery animate ()
Thí dụ
"Tạo hoạt ảnh" cho một phần tử, bằng cách thay đổi chiều cao của nó:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Định nghĩa và Cách sử dụng
Phương thức animate () thực hiện một hoạt ảnh tùy chỉnh của một tập hợp các thuộc tính CSS.
Phương thức này thay đổi một phần tử từ trạng thái này sang trạng thái khác bằng các kiểu CSS. Giá trị thuộc tính CSS được thay đổi dần dần để tạo hiệu ứng động.
Chỉ các giá trị số mới có thể được làm động (như "margin: 30px"). Giá trị chuỗi không thể được làm động (như "background-color: red"), ngoại trừ các chuỗi "hiển thị", "ẩn" và "chuyển đổi". Các giá trị này cho phép ẩn và hiển thị phần tử động.
Mẹo: Sử dụng "+ =" hoặc "- =" cho các hoạt ảnh tương đối.
Cú pháp
(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
| speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
| callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Cú pháp thay thế
(selector).animate({styles},{options})
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
| options | Optional. Specifies additional options for the animation. Possible values:
|
Hãy tự mình thử - Ví dụ
Cách sử dụng animate () với hàm gọi lại lặp lại hoạt ảnh.
cú pháp thay thế Sử dụng cú pháp thay thế để chỉ định nhiều kiểu và tùy chọn hoạt ảnh.
Cách sử dụng phương thức animate () để tạo thanh tiến trình.
Cách sử dụng animate () để thêm cuộn mượt mà vào các liên kết.