Fix Jquery high CPU usage animations with jQuery.fx.interval

Recently I am on a task of optimising a website having quite a number of Jquery plugins. The CPU usage of the browser after the page has loaded tremendously shoots up to 100% predominantly on a slower browser like Firefox. By decreasing the number of frames per second at which the browser is repainted by the animation, we can reduce the CPU cycles, of course at the cost of the quality of smoothness.

jQuery.fx.interval is the parameter for specifying the delay( in milliseconds ) at which the animations fire. Its default value is 13 which means that the frames are refreshed every 13 milliseconds. Hence, lower value gives smoother animations but the CPU gets busier. A value of 50-70 would be decent for normal animations and decreases the burden on the CPU correspondingly.

Example:

[js light="false" highlight="2"]
<script type="text/javascript">
jQuery.fx.interval = 100;
$(document).ready(function(){
$("input").click(function(){
$("div").toggle( 3000 );
});
});
</script>
[/js]

jQuery.fx.interval works with Jquery version 1.4.3 or higher.

Demo: Click here