Page 56 - jQuery для начинающих

Подключайте и используйте одну из трёх десятков функций easing (наглядно, с
иллюстрациями – animate.easing.html, а так же http://easings.net/)

Но давайте вернёмся к функции animate, которая в качестве параметров может принимать
ещё один набор параметров, который уже не будет казаться таким простым:

params – CSS свойства (уже было)
options – тут целый набор возможностей, часть уже описывалась ранее:

duration – скорость анимации

easing – функция («linear» или «swing»)
complete – функция, которая будет вызвана после окончания анимации

step – функция, которая будет вызвана на каждом шаге анимации, о ней
расскажу чуть ниже

queue – флаг/параметр очереди, чуть позже опишу подробнее
specialEasing – хэш в котором можно описать какую easing функцию
следует использовать для изменения определённых параметров

Step-by-step

Хотелось бы отдельно остановиться на функции step, и для наглядности приведу пример
step-функции которая отображает текущее значение анимированного параметра:

var customStep = function(now, obj) {
obj.elem; // объект анимации
obj.prop; // параметр, который анимируется
obj.start; // начальное значение
obj.end; // конечное значение

obj.pos; // коэффициент, изменяется от 0 до 1
obj.options; // опции настроек анимации
now; // текущее значение анимированного параметра, вычисляется как
// now = (obj.end - obj.start) * obj.pos
$(this).html(obj.prop +': '+now+obj.unit); // вывод текста
}
$("#box").animate({height: "+=10px"}, {step:customStep});

Мне ни разу не приходилось использовать step-функции, лишь только для примера

56

www.trk.kg