Шаг за шагом

Step-by-step

Хотелось бы отдельно остановиться на функции 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-функции в коммерческих проектах, лишь только для примеров кода в данном учебнике.