How to make ui slider to control jQuery.fx.interval?

I am building a website using a lot of animations but I have to limit the animations to jQuery.fx.interval = 100; so the CPU isn't maxed out at 100%. Since the animation speeds are slower, I was wondering is their a way that I can have a slider on my page so any user can control jQuery.fx.interval either by sliding it higher or lowering it to 0?

Thanks, any help is appreciated.

How do I add

jQuery.fx.interval = 100;

To This

$(function() {
    $( "#slider-range-min" ).slider({
        range: "min",
        value: 100,
        min: 0,
        max: 700,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });
    $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ));
});

animation for background, used with j开发者_高级运维Query backgroundPosition plugin. http://plugins.jquery.com/project/backgroundPosition-Effect

$(function(){
    $('body').animate({backgroundPosition:"(-99999px 0)"}, 6000000, 'linear');
    $('html').animate({backgroundPosition:"(-99999px -100000px)"}, 12000000, 'linear');
});

To make things easier, you can use this plugin: https://github.com/lrbabe/jquery.updateInterval

Then you can just do this:

$(document).ready(function() {
     $( "#slider" ).slider({
        range: "min",
        value: 100,
        min: 0,
        max: 700,
        stop: function( event, ui ) {
            $( "#amount" ).html( ui.value );
            $.fx.updateInterval(ui.value);
        }
    });
});

Notice that:

Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect. http://api.jquery.com/jQuery.fx.interval/