Phương thức animate trong jQuery

Tất cả các phương thức mà chúng ta đã phân tích trong những bài học trước, đều có phần hạn chế - chúng chỉ làm chính xác điều mà chúng được tạo ra để làm. Nếu bạn cần kiểm soát hoạt ảnh nhiều hơn - hãy sử dụng phương thức phổ quát animate.

Tham số đầu tiên phương thức này nhận một đối tượng, trong đó cần thiết lập các giá trị mới của các thuộc tính CSS mà bạn muốn tạo hoạt ảnh. Và tham số thứ hai - là thời gian thực hiện hoạt ảnh.

Hãy thực hiện phương thức này trên mã HTML sau:

<button id="button">click me</button>
<div id="elem">text...</div>

Giả sử CSS trông như thế này:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Hãy làm sao để khi nhấp vào nút, phần tử sẽ thu nhỏ đến kích thước sau: chiều cao - 50px, chiều rộng - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Nếu chỉ định giá trị ở định dạng height: '+=50', thì hoạt ảnh sẽ hoạt động như sau: giá trị chiều cao hiện tại sẽ được cộng thêm 50px (trong trường hợp của chúng ta) và phần tử sẽ được tạo hoạt ảnh mượt mà đến giá trị mới. Hãy xem ví dụ:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Chi tiết hơn về phương thức animate xem trong tài liệu tham khảo jQuery.

animate

Có bố cục HTML như sau:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Hãy làm sao để khi nhấp vào div có #block chiều rộng của nó tăng lên đến 200px trong 1100ms.

Sử dụng bố cục từ bài tập đầu tiên. Hãy làm sao để mỗi lần nhấp vào div có #block chiều rộng của nó tăng thêm 200px và mỗi lần tăng như vậy diễn ra trong 900px.

Sử dụng bố cục từ bài tập đầu tiên. Hãy làm sao để mỗi lần nhấp vào div có #block, chiều rộng và chiều cao của nó tăng thêm 100px và mỗi lần tăng như vậy diễn ra trong 950px.

Sử dụng bố cục từ bài tập đầu tiên. Hãy làm sao để mỗi lần nhấp vào div có #block, nó di chuyển sang phải 100px và mỗi lần di chuyển như vậy diễn ra trong 700px.