Abspielen von jQuery-Animationen in Zeitlupe zum Debuggen

Question

Wenn Sie eine Seite mit komplexen Animationen mit mehreren divs und Abstraktionen darüber haben (wie knockout.js), ist es manchmal schwer zu erkennen, warum einige Elemente während der Animation herumspringen .

Eine Möglichkeit zum Debuggen besteht darin, nach allen Stellen zu suchen, an denen die Animationen festgelegt sind, und die Animationslängen zu multiplizieren. Dies kann natürlich ziemlich mühsam sein.

Frage

Gibt es eine nette schmutzig Hack alle jQuery Animationen der aktuellen Seite in Zeitlupe zu zeigen?

Answer 1

Sie könnten belebte Methode erweitern, zB:

(! Aber Dauer kann als Eigentum von Optionen übergeben werden zu dem Objekt, werden Sie auch diesen Fall zu behandeln haben)

;(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