Метод animate в jQuery

Все методы, которые мы разбирали в предыдущих уроках, несколько ограничены - они делают именно то, для чего созданы. Если вам нужно больше контроля за анимацией - используйте универсальный метод animate.

Первым параметром этот метод принимает объект, в котором следует задать новые значения CSS свойств, которые вы хотите анимировать. А вторым параметром - время выполнения анимации.

Давайте реализуем данный метод на следующем HTML коде:

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

Пусть CSS выглядит так:

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

Давайте сделаем так, чтобы по нажатию на кнопку элемент сжался до следующих размеров: высота - 50px, ширина - 100px:

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

Если указать значение в таком формате height: '+=50', то анимация будет работать так: к текущему значению высоты будет прибавлено 50px (в нашем случае) и элемент будет плавно анимирован до нового значения. Посмотрим на примере:

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

Подробнее про метод animate смотрите в справочнике jQuery.

animate

Есть такая вёрстка:

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

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

Сделайте так, чтобы при нажатии на див с #block его ширина увеличилась до 200px за 1100мс.

Используйте вёрстку из первой задачи. Сделайте так, чтобы при каждом нажатии на див с #block его ширина увеличивалась на 200px и каждое такое увеличение происходило бы за 900px.

Используйте вёрстку из первой задачи. Сделайте так, чтобы при каждом нажатии на див с #block его ширина и высота увеличивались бы на 100px и каждое такое увеличение происходило бы за 950px.

Используйте вёрстку из первой задачи. Сделайте так, чтобы при каждом нажатии на див с #block, он перемещался бы вправо на 100px и каждое такое перемещение происходило бы за 700px.