Пользовательские анимации с помощью метода animate()

В прошлых главах, мы рассмотрели встроенные в jQuery эффекты растворения и скольжения. Однако, у вас есть гораздо больше возможностей. С методом animate() вы можете создавать свои собственные анимации, в которых можно манипулировать большим количеством числовых CSS-свойств элемента. Например, можно плавно перемещать блок по экрану, или заставить его прыгать вверх-вниз. Давайте начнем с чего-нибудь попроще:

<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>

Первый и единственный обязательный параметр функции анимации - это карта свойств CSS, которые вы хотите изменять. В данном случае, у нас есть абсолютные координаты элементы, которые мы говором jQuery изменять до тех пор, пока свойство left не достигнет значения 200 пикселей. Второй параметр позволяет задать длительность анимации в миллисекундах, либо "slow", либо "fast", что соответствует 600 и 200 мс. С ним мы можем замедлить предыдущий пример на сколько захотим:

<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>

Что до третьего параметра, мы можем задать callback-функцию, которую нужно вызвать по завершении анимации. Это может быть очень удобно, чтобы выполнить цепочку анимаций. Для демонстрации рассмотрим следующий пример:

<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>

Сейчас это может выглядеть немного сложно, но все что мы сделали - это вызвали метод анимации и запросили анимацию свойства left нашего тестового div-а, пока оно не достигнет значения 100 пикселей. Мы хотим, чтобы это заняло 1 секунду (1000 мс), и как только эта анимация завершится, мы хотим, чтобы началась новая - которая сдвинет блок обратно на 20 пикселей за полсекунды, и как только вторая анимация закончится, блок снова смещается вправо в позицию left 50 пикселей.

Тем не менее, поскольку jQuery содержит множество возможностей для анимации, на самом деле, вы можете получить тот же результат гораздо проще. Но это работает только для случаев, когда вы хотите запустить цепочку анимаций одну за другой - если по завершении анимации вам нужно что-то другое, воспользуйтесь примером выше. А вот версия с очередью:

<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>