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?

Please post your HTML & CSS. There isn't enough code here to know what's going wrong. — maxedison, Sep 11 '11 at 15:54
what do u need? there's no css except what's from the body. and the html is just a bunch of input tags. — yoshi, Sep 11 '11 at 16:15

scessor · Accepted Answer · 2011-09-11T17:43:55.950

16

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.

edited Sep 11 '11 at 17:43

answered Sep 11 '11 at 16:57

scessor

15,995
4
43
54

so this is really close to what i want to achieve. but instead of being random over every hover -- i want the color to change randomly while hovered. so for example: if a color changes every second and i hover for three seconds, the user should see three colors....hmm i wonder what happens if i take out the stops – yoshi Sep 11 '11 at 17:29
ah, okay. so the jquery color plugin calls in a function that 'transitions' one color into another. and to keep changing colors, it recursively calls itself. i dropped this script into there and it works! but theres still something wrong becuase it requires a lot of processing power and the website stalls everytime I hover – yoshi Sep 11 '11 at 17:39
yea!! could u walk me through what ure code is doing? what does it mean for startAnimation to pass "o" down? – yoshi Sep 11 '11 at 17:55
The jquery [hover method](http://api.jquery.com/hover/) passes an `event object` to the handler _startAnimation_. It's needed to select the current target. – scessor Sep 11 '11 at 18:02
I find that adding `queue: false` to the animation options runs much faster than calling `stop()` and then `animate()` again, e.g. $(this).animate( { color: '#000', queue: false }, 500); – Trevin Avery Oct 27 '14 at 21:20

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

The main problem that jQuery doesn't support the color animation. More results can be found jQuery: animate text color for input field?

edited May 23 '17 at 10:29

Community

1
1

answered Sep 11 '11 at 15:54

Samich

29,157
6
68
77

I don't think he's having troubles generating a random color. It's APPLYING that color with the jquery.color plugin that is giving him trouble. – maxedison Sep 11 '11 at 15:57

score 0 · Answer 3 · answered Sep 11 '11 at 15:58

$('label').hover will add a mouseover/mouseout event to the label. You are doing this infinitely as, you are calling spectrum over and over 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);
});

jquery random color hover

3 Answers3