Оптимизация jQuery.animate

Задача

Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем jQuery.animate.

Решение фиговое

$("#kv2").animate({left: 550, width: 100},1000);
$("#kv3").animate({top: 450, width: 100},1000);
$("#kv4").animate({left: 550, top: 450, width: 100},1000);
	
setTimeout(function() {$("div").css("background","green");}, 1001);

Проблема данного кода заключается в том, что каждый animate запускает свой таймер со своими перерисовками экрана. Чтобы число перерисовок сократить используем один animate и его функцию step. Функция step будет выполняться на каждом шаге анимации. Дополнительно воспользуемся функцией complete, которая срабоатет один раз по завершению анимации:

$("#kv2").animate(
		{
			/*
				на значение данного параметра будут опираться вычисления для остальных объектов и свойств.
				выбираем с которым проще работать и меньше математических действий
			*/
			left: 550 
		},
		{
			duration: 1000,
			step: function(now, fx)
			{
				$("#kv2").css({"width": 50+(now-250)/6+"px"}); // вычисляем ширину данного блока в зависимости от положения
				$("#kv3").css({"top":now-100+"px", "width": 50+(now-250)/6+"px"}); // вычисляем top этого блока относительно положения left у #kv2
				$("#kv4").css({"top": now-100+"px", "left": now+"px", "width": 50+(now-250)/6+"px"}); // вычисляем позицию блока отностельно left у #kv2
			},
			complete: function()
			{
				$("div").css("background","green");
			}
		}
		);

Посмотреть в живую. Отследить эффект можно с помощью Хромовского файрбага, вкладки «Timeline».

Чем сложнее анимация, больше количество объектов участвует в ней и дольше длиться по времени, тем больше прирост производительности даст такой подход.

Подробней о функции step

Она принимает два парамтера: now и fx.

Now — значение анимированного свойства в данный момент (на данном шаге анимации). При чем следует заметить, что если анимированных свойств несколько например так:

$("#kv2").animate({left: 550, width: 100},
[...]

тогда now на каждом шаге будет возврщать два значения: left и width. Выделить нужное из них я не нашел способа. Поэтому анимирую одно свойства, остальные меняю в функции step.

Параметр fx возвращает несколько значений, которые могут пригодиться:

Материалы

• The jQuery animate() step callback function

По теме

• Аппаратное ускорение анимации