Question

I’m trying to make each span rotate between a random color on 3sec intervals.

JSFiddle: http://jsfiddle.net/WERFJ/21/

<h1><span class="first">TEXT1</span> <span class="second">TEXT2</span> <span class="third">TEXT3</span></h1>

Currently I’m using the below code and the jquery.animate-colors plugin. Is there any way to make this run or get the same effect faster. Chrome can handle it but FF often crashes. Thanks!

$(document).ready(function() {  
        spectrum();  

            function spectrum(){  
                var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
                var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';  
                var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';  

                $('.first').animate( { color: hue1 }, 3000);
                $('.second').animate( { color: hue2 }, 3000);
                $('.third').animate( { color: hue3 }, 3000); 
                spectrum();  
        }  
    });

Answer 1

I think your problem is that the recursive call is not waiting for the animations to finish. by adding the call as a callback to the last animate call you will be only recalling it when the last ones are done instead of queueing and infinite chain of animations. http://jsfiddle.net/WERFJ/23/ it seems to work fine in firefox now

$(document).ready(function() {
    spectrum();

    function spectrum() {
        var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';
        var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';

        $('.first').animate({
            color: hue1
        }, 3000);
        $('.second').animate({
            color: hue2
        }, 3000);
        $('.third').animate({
            color: hue3
        }, 3000, spectrum);
    }
});​