Random jquery color picker

Question

I use jquery color to generate some random colors. An identifier similar to these colors appears when the user hovers over any radio button labels.

Following the example of this site , I thought I could 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 does not work and everything remains by default. I am obviously so embarrassed, but I am not experienced enough to understand what is going wrong. Any suggestions?

Answer 1

Try the following:

 $(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 .

Answer 2

The main problem is that jQuery does not support color animation. Additional results can be found in jQuery: change text color for input field?

Answer 3

$('label').hover will add the mouseover / mouseout event to the label. You do this endlessly, as you invoke the spectrum again and again. Try this instead.

 $('label').hover(function() { (function anim() { var hue = //hue stuff $(this).animate({ color: hue }, 10000, function() { anim(); }); })(); }, function() { $( this ).animate({ color: //original color }, 1000); });