jquery random color hover

Question

I'm using jquery color to generate some random colors. Id like these colors to appear when the user hovers over any radio button labels.

Following the example on this site, i thought i might try:

spectrum();

function spectrum(){

var hue = ('lots of stuff here that generates random hue -- code on example webpage')

$('label').hover(function() {
   $(this).animate( { color: hue }, 10000) });

spectrum(); 

}

My hover selector isn't working and everything is staying its default color. I'm obviously bungling this somehow, but I'm not experienced enough to understand what's going wrong. Any suggestions?

Answer 1

Try this:

$(document).ready(function() {
    $('label').hover(function() {
        var hue = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';
       $(this).stop().animate( { color: hue }, 500);
    },function() {
       $(this).stop().animate( { color: '#000' }, 500);
    });
});

Also see my jsfiddle.

=== UPDATE ===

function startAnimation(o) {
    var hue = 'rgb('
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ')';
    $(o.currentTarget).animate( { color: hue }, 500, function() {
        startAnimation(o);
    });
}

$(document).ready(function() {
    $('label').hover(
        startAnimation,
        function() {
            $(this).stop().animate( { color: '#000' }, 500);
        }
    );
});

See my updated jsfiddle.