Прогресс

Давайте вернёмся к методу animate(), который в качестве аргументов может принимать расширенный набор опций — animate(properties, options), первым идут CSS-свойства, с которыми мы уже работали ранее, а вот вторым аргументом — опции, которые нам дают ряд новых возможностей (я перечислю все доступные опции, часть из них нам уже встречались):

duration	скорость анимации
easing	функция «linear» или «swing», или любая другая
queue	флаг/параметр очереди; о ней расскажу чуть ниже
specialEasing	хэш, в котором можно описать, какую именно easing-функцию следует использовать для изменения определённых параметров: $("img").animate({ "height": "+=100px", "width": "+=100px" }, { "specialEasing": { "height": "linear", "width": "swing" } })
step	функция, которая будет вызвана на каждом шаге анимации для каждого CSS-свойства; чуть позже опишу подробнее
complete	функция, которая будет вызвана после окончания анимации
start	функция, которая будет вызвана до начала анимации
progress	функция, которая будет вызвана на каждом шаге, но только единожды для элемента, вне зависимости от количества CSS-свойств
done	функция, которая будет вызвана после успешного окончания анимации
fail	функция, которая будет вызвана после неудачного окончания анимации
always	функция, которая будет вызвана после окончания анимации при любом исходе

Поддержка последних пяти функций добавлена в версии 1.8. Данный релиз jQuery ознаменовался глобальным рефакторингом анимации и переездом на Deferred.

Зачем я постоянно обращаю ваше внимание на изменения в таких старых версиях jQuery? Просто никто не знает с чем вам придется столкнуться, поэтому лучше готовиться к худшему.

В каких случаях нам это будет полезно? Ну если вам нужно отслеживать прогресс анимации, то это именно то, что вам нужно, точнее, вам нужна будет функция progress(animation, progress, remainingMs):

// изменяем высоту и ширину картинок
$("img").animate({
  "height": "+=100px",
  "width": "+=100px"
}, {
  "start":    () => console.log("start"),
  "progress": (animation, progress, time) => console.log("progress", progress),
  "done":     () => console.log("done"),
  "fail":     () => console.log("fail"),
  "always":   () => console.log("always")
})

Пример анимации, используем методом "animate()" с опциямиanton.shevchuk.name