Чаще всего анимация на jQuery проходит гладко. Но иногда в уже готовый сайт закрадывается какой-то глюк, например что-то дергается. В таких случаях очень хочется замедлить анимацию jQuery, чтобы проверить что и где анимируется.

Конечно, вы можете сказать, что можно просто задать время анимации в jQuery, как параметр функции animate, но нет, это не совсем то, что нужно. Замедлив одну анимацию не всегда удаётся увидеть что-же не так на самом деле.

Как замедлить анимацию jQuery для отладки анимации

В коде ниже мы замедлим анимацию для всех анимаций на странице. Это работает настолько эффективно, что вы будете в восторге. Достаточно всего-лишь добавить этот кусочек кода на время отладки, и он сделает все анимации в N раз медленнее. При этом вы успеете отследить и изменения в инспекторе, и проследить какой элемент бажит.

 ;(function($) {
     var slowingCoeff = N; //подставьте вместо N коэф. замедления
     $.fx.speeds = {
         slow: slowingCoeff * 600,
         fast: slowingCoeff * 200,
         _default: slowingCoeff * 400
     };
     var oAnimate = $.fn.animate;
     $.fn.animate = function(prop, speed, easing, callback) {
         if(typeof speed === "number")
             speed *= slowingCoeff;
         return oAnimate.call(this, prop, speed, easing, callback);
     }

 })(jQuery);

Вместо N в коде нужно подставить коэффициент замедления. Я использую 10, но можно и меньше / больше – в зависимости от требований.

После отладки этот код можно удалить. При этом в процессе отладки не нужно править код абсолютно всех функций анимации, и все скорости восстановятся сразу же после отладки.