# Метод 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`.

← →
↑