Change CSS background with jQuery conditionals

Question

I'm building some html thermometers, which are animated with jQuery in order to show represent a percentage number (as you can see in the Fiddle I've built).

What I want, and I can't figure out what I'm doing wrong, is to get the thermometer's color to change depending the level they are representing. For instance in the Fiddle's script those under 80 should be color blue, and those over 80 should be yellow, but all of them turn out blue.

This is the jQuery code:

$('.lvl').each(function(){
    var level = $(this).text();
    $(this).animate( {
        width: level+'%'
    }, 1000);

    var lvlwidth = $(this).width();
    if (lvlwidth < 80) {
        $(this).css('background-color', 'blue');
    } else if (lvlwidth > 80) {
        $(this).css('background-color', 'yellow');
    }
});

Update: As I say in the comments below, what I want is the bar to dynamically change color as it grows, so for example to be blue when it's under 40, then turn yellow, and when it reaches 80 turn red.

You're checking the width as the animation starts, and at that point the elements have no width. Why aren't you just using the level variable, as you already have the number you want there ? — adeneo
– adeneo, Commented Nov 28, 2014 at 22:15
Thanks @adeneo. I didn't do it that was because I was hoping to get it to change dynamically as it grew, so to be initially one color, change to another once it reaches 40, and then change again when it reaches 80. The level variable is fixed while the width changes. — Rubén Jiménez
– Rubén Jiménez, Commented Nov 28, 2014 at 22:27
It's possible to do what you wan't, but that would be more complicated and require using the step callback in jQuery's animate — adeneo
– adeneo, Commented Nov 28, 2014 at 22:34
"...blue when it's under 40, then turn yellow, and when it reaches 80 turn red" so it should be yellow at 60? — David Thomas
– David Thomas, Commented Nov 28, 2014 at 23:10

dm4web · Accepted Answer · 2014-11-28 22:56:16Z

1

UPDATE:

http://jsfiddle.net/rpxr4bjj/3/

$('.lvl').each(function () {
    var level = $(this).text();
    $(this).animate({
        width: level + '%',
    }, {
        progress: function () {


            if (level < 80) {
                $(this).css('background-color', 'blue');
            } else if (level > 80) {
                $(this).css('background-color', 'yellow');
            }
        }
    }, 3000);


});

edited Nov 28, 2014 at 22:56

answered Nov 28, 2014 at 22:45

dm4web

4,6521 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Rubén Jiménez Over a year ago

Thanks @dm4web, but don't they all go yellow now? aren't those under width: 80% supposed to stay blue in this example?

dm4web Over a year ago

i test in FF and works. In chrome they all yellow. and I will look to

dm4web Over a year ago

I added a correction. problem was the width not Chrome or FF.

Rubén Jiménez Over a year ago

Thanks again @dm4web. Do you think there's a way of getting the bars to all start in the same color and change colors as they animate, instead of being all the way the same color?

Fábio Duque Silva Over a year ago

Like this? jsfiddle.net/fabio_silva/2nbbbcxc/1 (i made some tweaks you may disregard, like a third color level, and transitions)

|

Collectives™ on Stack Overflow

Change CSS background with jQuery conditionals

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related