Play jQuery animations in slow motion for debugging

Question

When you have a page with complex animations with multiple divs and some abstractions on top of it (like knockout.js), it is sometimes hard to see why some elements are jumping around while animating.

One way to debug would be looking up for all the places where the animations are set, and multiply the animation lengths. This can be of course pretty tedious.

Question

Is there some nice dirty hack to show all jQuery animations of the current page in slow motion?

Answer 1

You could extend animate method, e.g:

(but duration can be passed as property of options object too, you will have to handle this case too!)

;(function($) {
    var slowingCoeff = 10;
    $.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);

basic DEMO