Step-by-step

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

▷

// элемент, который будет использоваться для вывода информации
var $h2 = $('h2');
// наша 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

    $h2.html(obj.prop +': '+now+obj.unit); // вывод текста
};
// вызываем анимацию с произвольной функцией
$("img").animate({height: "-=10px"}, {step: customStep});

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