jquery random color hover

Question

Estoy usando jquery color para generar colores aleatorios. Me gustaría que estos colores aparezcan cuando el usuario pasa el mouse sobre las etiquetas de los botones de opción.

Siguiendo el ejemplo de this site, pensé que podría probar:

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(); 

} 

Mi selector de vuelo estacionario no está funcionando y todo se queda su color predeterminado. Obviamente estoy torciendo esto de alguna manera, pero no tengo suficiente experiencia para entender lo que está pasando mal. ¿Alguna sugerencia?

Answer 1

Prueba esto:

$(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); 
    }); 
}); 

Véase también mi jsfiddle.

=== === ACTUALIZACIÓN

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); 
     } 
    ); 
}); 

ver mis actualizan jsfiddle.

Answer 2

El principal problema que jQuery no admite la animación de color. Más resultados se pueden encontrar jQuery: animate text color for input field?

Answer 3

$('label').hover agregarán un evento mouseover/mouseout a la etiqueta. Estás haciendo esto infinitamente, estás llamando espectro una y otra vez. Pruebe esto en su lugar.

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