Custom animations with the animate() method

Trong các chương trước, chúng ta đã xem hiệu ứng fading và sliding trong jQuery. Tuy nhiên, bạn có thể làm được nhiều hơn thế. Với phương thức animate(), bạn có thể tạo ra hiệu ứng animation. Nó cho phép bạn có thể di chuyển một box chậm rãi ngang qua màn hình hay nhảy lên xuống. Hãy thử ví dụ sau:

<div style="height: 60px;">
	<div id="divTestBox1" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
	$("#divTestBox1").animate(
		{
			"left" : "200px"
		}
	);
});
</script>

Đầu tiên và yêu cầu là tham số của hàm animate là thuộc tính CSS mà bạn muốn thay đổi. Trong trường hợp này, chúng ta có vị trí của div cho jQuery biết phải di chuyển cho tới khi nó có thuộc tính left là 200 pixel. Tham số thứ hai cho phép chúng ta xác định khoảng thời gian của animation theo mili giây hay "slow", "fast" có giá trị tương ứng 600 và 200 ms. Chúng ta có thể làm chậm lại như ta muốn:

<div style="height: 60px;">
	<div id="divTestBox2" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
	$("#divTestBox2").animate(
		{
			"left" : "200px"
		}, 
		5000
	);
});
</script>

Tham số thứ ba là hàm callback được gọi khi hoàn thành animation. Nó rất hữu ích khi thực hiện các animation khác nhau trong cùng một dòng. Hãy xem ví dụ sau:

<div style="height: 40px;">
	<div id="divTestBox3" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
	$("#divTestBox3").animate(
		{ "left" : "100px" }, 
		1000,
		function()
		{
			$(this).animate(
				{ "left" : "20px" },
				500,
				function()
				{
					$(this).animate({ "left" : "50px" }, 500);
				}
			)
		}
	);
});
</script>

Có vẻ quá nhiều nhưng những gì chúng ta làm gọi là phương thức animate điều khiển thuộc tính left của div cho tới khi nó có giá trị 100 pixel. Chúng ta muốn diễn ra trong 1 giây (1000 mili giây) và một khi nó hoàn thành, chúng ta muốn animation mới bắt đầu, nó sẽ quay trở lại 20 pixel trong nửa giây, ngay khi animation đó xong thì chúng ta cho nó dịch sang phải cho tới khi thuộc tính left có giá trị 50 pixel.

Tuy nhiên, vì jQuery cung cấp chức năng dạng hàng đợi cho animation, bạn có thể viết lại ví dụ trên theo cách đơn giản hơn. Nó chỉ áp dụng cho trường hợp bạn muốn một tập các animation thực hiện nối theo nhau - nếu bạn muốn làm gì khác khi hoàn thành animation. Ví dụ:

<div style="height: 40px;">
	<div id="divTestBox4" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"></div>
</div>
<script type="text/javascript">
$(function()
{
	$("#divTestBox4").animate({ "left" : "100px" }, 1000);
	$("#divTestBox4").animate({ "left" : "20px" }, 500);
	$("#divTestBox4").animate({ "left" : "50px" }, 500);
});
</script>