Хотелось бы отдельно остановиться на функции step, и для наглядности приведу пример реализации подобной функции, которая отображает текущее значение анимированного параметра:
// элемент, который будет использоваться для вывода информации
let $h2 = $("h2");
// наша step-функция
let customStep = function(now, fx) {
fx.elem; // объект анимации
fx.prop; // параметр, который анимируется
fx.start; // начальное значение
fx.end; // конечное значение
fx.pos; // коэффициент, изменяется от 0 до 1
fx.options; // опции настроек анимации
now; // текущее значение анимированного параметра, вычисляется как
// now = (fx.end - fx.start) * fx.pos
$h2.html(`${fx.prop}: ${now}${fx.unit}`); // вывод текста
};
// вызываем анимацию с произвольной функцией
$("img").animate({ height: "-=10px" }, { step: customStep });
Стоит запомнить, что step-функция будет запускаться для каждого элемента в выборке и для каждого свойства, который мы анимируем.
С помощью данной функции, можно остановить анимацию при достижении заданных значений:
// step-функция, которая останавливает анимацию
// при значении 'left' меньшем или равным нулю
let limitForLeft = function (now, fx) {
if (fx.prop === "left" && fx.start > fx.end && now <= 0) {
$(this).stop()
}
}
Мне ни разу не приходилось использовать step-функции в коммерческих проектах, лишь только для примеров кода в данном учебнике.
