fading in a background color based on value

Question

I'm trying to use the Jquery animate feature to change the background color of a div. If a random number is below 50 animate red and if higher than 50 animate green. Everything seems to work except for the color change. What I'm I doing wrong here?

function randomInt(min,max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

if (randomInt(1, 100) > 50) {
    $('#status').html("win").animate({backgroundColor: "green" }, "fast");
} else {
    $('#status').html("lose").animate({ backgroundColor: "red" }, "fast");
}

[This post](http://stackoverflow.com/q/190560/1806218) answers your question. — wannaKnowItAll, Jan 26 '14 at 22:47
Duplicated http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Tan Nguyen, Jan 26 '14 at 22:48

score 0 · Answer 1 · answered Jan 26 '14 at 22:46

0

You need to either use jQuery UI or a special color plugin to animate colors - unlike most other CSS properties.

http://plugins.jquery.com/color/

answered Jan 26 '14 at 22:46

score 0 · Answer 2 · answered Jan 27 '14 at 00:23

Probably not with jQuery animate() but with CSS3 transition.

CSS:

#status {
    -webkit-transition: background-color 2000ms linear;
    -moz-transition: background-color 2000ms linear;
    -o-transition: background-color 2000ms linear;
    -ms-transition: background-color 2000ms linear;
    transition: background-color 2000ms linear;
 }

jQuery:

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

if (randomInt(1, 100) > 50) {
    $('#status').html("win").css({
        backgroundColor: "green"
    });
} else {
    $('#status').html("lose").css({
        backgroundColor: "red"
    });
}

See this jsfiddle.

But if you're really looking to do this with pure jQuery you can use jQuery Color which is more lighter than the whole UI Library.

score 0 · Answer 3 · answered Jan 27 '14 at 00:32

If you don't want to use Jquery UI or special plugin. **Just want to showcase "green" or "red" color then there is other working solution:

function randomInt(min,max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
var status = $('#status');
if (randomInt(1, 100) > 50) {
    status.append("win");
    status.css({backgroundColor: 'green'});
} else {
    status.append("lose");
    status.css({backgroundColor: 'red'});
}

score 0 · Answer 4 · answered Jan 27 '14 at 14:36

0

Why don't you do it with simply JavaScript and CSS?

Just adding transition: background 1s to your CSS and using getElementById in JavaScript

Here's a Fiddle

answered Jan 27 '14 at 14:36

ManelPNavarro

579
7
21

fading in a background color based on value

4 Answers4