Оптимизация jQuery.animate
Задача Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем jQuery.animate. Решение фиговое Javascript 1 $(«#kv2»).animate({left: 550, width: 100},1000); 2 $(«#kv3»).animate({top: 450, width: 100},1000); 3 $(«#kv4»).animate({left: 550, top: 450, width: 100},1000); 4 5 setTimeout(function() {$(«div»).css(«background»,»green»);}, 1001); Проблема данного кода заключается в том, что каждый animate запускает свой таймер со своими перерисовками экрана. Чтобы число перерисовок сократить используем один animate и его функцию step. Функция step будет выполняться на каждом шаге анимации. Дополнительно воспользуемся функцией complete, которая сработает один раз по завершению анимации: Javascript 01 $(«#kv2»).animate( 02 { 03 /* 04 на значение данного параметра будут опираться вычисления для остальных объектов и свойств. 05 выбираем с которым проще работать и меньше математических действий 06 */ 07 left: 550 08 }, 09 { 10 duration: 1000, 11 step: function(now, fx) 12 { 13 $(«#kv2»).css({«width»: 50+(now-250)/6+»px»}); // вычисляем ширину данного блока… Читать далее »