Метод 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.
Есть такая вёрстка:
<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.