Phương thức animate

Phương thức animate cho phép tạo hiệu ứng hoạt ảnh cho các thuộc tính CSS khác nhau. Tham số bắt buộc duy nhất - là đối tượng chứa các thuộc tính CSS, tương tự như thứ chúng ta truyền vào phương thức css. Nhiều thuộc tính có giá trị không phải số hoặc nhiều giá trị không thể được tạo hoạt ảnh bằng chức năng cơ bản của jQuery (ví dụ background-color). Đồng thời không phải lúc nào cũng hỗ trợ tên rút gọn của thuộc tính CSS, ví dụ font - thay vào đó cần sử dụng fontSize hoặc font-size. Trước các giá trị có thể đặt '+=' hoặc '-=', trong trường hợp như vậy giá trị được chỉ định tiếp theo sẽ được cộng thêm hoặc trừ đi từ giá trị hiện tại của thuộc tính. Cũng có thể thay thế giá trị số bằng show, hide hoặc toggle. Tất cả hiệu ứng jQuery, bao gồm animate, có thể bị tắt toàn cục bằng cách sử dụng cài đặt jQuery.fx.off = true, thao tác này đặt giá trị thời lượng về 0.

Cú pháp

Tham số đầu tiên của hoạt ảnh là đối tượng chứa các thuộc tính CSS và giá trị của chúng theo định dạng khóa: giá trị, mà chúng ta dự định tạo hoạt ảnh. Các tham số còn lại được coi là không bắt buộc. Tham số thứ hai - xác định thời lượng hoạt ảnh tính bằng mili giây, mặc định là 400ms. Tham số thứ ba là hàm làm mượt (easing function) cho chuyển tiếp (mặc định là swing), và thứ tư - hàm callback, hàm này sẽ được thực thi sau khi hoạt ảnh kết thúc:

.animate(thuộc_tính, [thời_lượng ], [hàm_làm_mượt ], [hàm_callback ]);

Thời gian có thể được chỉ định không chỉ bằng mili giây, mà còn bằng các từ khóa slow (600ms) và fast (200ms), giá trị càng lớn, hoạt ảnh càng chậm. Có thể truyền cho phương thức các tùy chọn khác nhau bằng tham số thứ hai, dưới dạng đối tượng JavaScript, chứa các cặp khóa: giá trị:

.animate(thuộc_tính, tùy_chọn);

Ví dụ, hãy đặt cho các thuộc tính CSS width và height giá trị toggle. Thời lượng là 5000ms, chúng ta sẽ truyền hàm làm mượt dưới dạng đối tượng, cho chiều rộng sẽ là hàm tuyến tính, còn cho chiều cao - easeOutBounce, đồng thời khi hoạt ảnh kết thúc, hàm của chúng ta sẽ được thực thi một lần (xem khóa complete), hàm này sẽ đặt một thẻ div với dòng chữ 'Hoạt ảnh hoàn tất.' sau phần tử có #test:

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Hoạt ảnh hoàn tất.</div>');
	}
});

Dưới đây trong bảng liệt kê các thuộc tính và phương thức của đối tượng options và mô tả của chúng:

Tên	Mô tả
`duration`	Thời lượng hoạt ảnh tính bằng mili giây - chuỗi hoặc số. Mặc định là `400ms`.
`easing`	Xác định hàm làm mượt nào được sử dụng. Mặc định là `swing`.
`queue`	Giá trị Boolean hoặc chuỗi. Mặc định là `true`. Chỉ định - có đưa hoạt ảnh vào hàng đợi hay không. Với giá trị `false` hoạt ảnh sẽ bắt đầu ngay lập tức. Nếu tham số là một chuỗi, thì hoạt ảnh sẽ được đặt vào hàng đợi, được đại diện bởi tham số này. Khi sử dụng hàng đợi với tên tùy chỉnh, hoạt ảnh sẽ không tự động khởi chạy, để khởi chạy nó - hãy sử dụng `dequeue('queuename')`.
`specialEasing`	Tại đây bạn có thể truyền một đối tượng, trong đó các khóa sẽ là các thuộc tính CSS, và các giá trị - là các hàm làm mượt tương ứng với chúng.
`step`	Hàm được gọi cho mỗi thuộc tính được tạo hoạt ảnh của mỗi phần tử được tạo hoạt ảnh. Nó cho phép sửa đổi đối tượng `Tween` để thay đổi giá trị của thuộc tính trước khi nó được thiết lập. Nó nhận giá trị hiện tại của `tween` và đối tượng `Tween` làm tham số.
`progress`	Hàm được gọi sau mỗi bước của hoạt ảnh, chỉ một lần duy nhất cho mỗi phần tử bất kể số lượng thuộc tính được tạo hoạt ảnh. Hàm nhận ba tham số `animation` (dưới dạng promise), `progress` (số từ `0` đến `1`) và `remainingMs` (số mili giây còn lại).
`complete`	Hàm được gọi một lần sau khi hoạt ảnh của phần tử kết thúc. Hàm nhận `animation` (dưới dạng promise).
`start`	Hàm được gọi khi hoạt ảnh của phần tử bắt đầu. Hàm nhận `animation` (dưới dạng promise) và `jumpedToEnd` (Giá trị Boolean. Nếu là `true`, thì hoạt ảnh tự động kết thúc).
`done`	Hàm được gọi khi hoạt ảnh của phần tử kết thúc (promise của nó được thực hiện thành công). Hàm nhận `animation` (dưới dạng promise) và `jumpedToEnd` (Giá trị Boolean. Nếu là `true`, thì hoạt ảnh tự động kết thúc).
`fail`	Hàm được gọi khi hoạt ảnh của phần tử kết thúc với lỗi (promise của nó được thực hiện với lỗi). Hàm nhận `animation` (dưới dạng promise) và `jumpedToEnd` (Giá trị Boolean. Nếu là `true`, thì hoạt ảnh tự động kết thúc).
`always`	Hàm được gọi khi hoạt ảnh của phần tử hoàn thành hoặc dừng lại mà không hoàn thành (promise của nó được thực hiện thành công hoặc với lỗi). Hàm nhận `animation` (dưới dạng promise) và `jumpedToEnd` (Giá trị Boolean. Nếu là `true`, thì hoạt ảnh tự động kết thúc).

Ví dụ

Hãy để khi nhấn vào nút #left, chúng ta dịch chuyển hình vuông màu xanh lá cây sang trái, còn khi nhấn nút #right sang phải 50px, đồng thời đặt thời lượng là 600ms - bằng lệnh slow:

<button id="left">trái</button>
<button id="right">phải</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Xem thêm

phương thức show,
phương thức hiển thị phần tử một cách mượt mà
phương thức stop,
phương thức cho phép dừng hoạt ảnh đang chạy
phương thức delay,
phương thức thiết lập độ trễ thực thi sự kiện
thuộc tính jQuery.fx.off,
thuộc tính cho phép tắt hoạt ảnh toàn cục
bộ chọn animated,
bộ chọn các phần tử hiện đang tham gia vào hoạt ảnh