jQuery Animate backgroundColor with If and Else

Question

I'm trying to use if and else in a jQuery Function based in the backgroundColor of a li tag, for exemple: If this backgroundColor = #ccc do something, else, do other. I tried like this:

if ($(this).css('backgroundColor = #EBE5C5')) {

but it doesnt work right, can you help me?

Hmm,thanks a lot, but it still not working right, see the full function right here:

$(function(){
$('.slider-nav li')
    .mouseover(function(){
        if ($(this).css('background-color') == "#EBE5C5") { 
            $(this).stop().animate({'backgroundColor':'#c0ba9f'},250);
        }
    })
    .mouseout(function(){
        $(this).stop().animate({'backgroundColor':'#EBE5C5'},250);
    })
});

score 2 · Answer 1 · edited May 23 '17 at 12:03

jQuery Gives us RGB, not HEX

jQuery will return an rgb value for #CCC when requested. For example, if you set the background color to #CCC, and then requested it with jQuery:

$(".foo").css("backgroundColor"); // rgb(204, 204, 204)

Getting HEX from RGB

This means you'll need to have a means by which to convert the rgb back into HEX. This question has been asked and answered, here on Stack Overflow. See Get HEX value rather than RGB value with jQuery. For our purposes we can use the function below:

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

Making Smooth backgroundColor Animations Possible

That would take care of the retrieval, and the comparison. Next you'll need to load in the jQuery UI core which extends the $.animate() method just a bit.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui..."></script>

Animating the Background Color

With jQuery UI's core inplace (full path here), you can do the following:

$(".foo").animate({ backgroundColor: "#999999" }, 1000);

This will gradually animate the background from whatever it is to begin with, to #999999, over the time of one second.

All Together Now

So in the end we have the following (assumes jQuery UI's core is linked):

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

$("#hello").on("click", function(e){
  background = rgb2hex( $(this).css("backgroundColor") );
  if ( background == '#cccccc' ) {
    $(this).animate({
      backgroundColor: "#123456",
      color: "#fff"
    }, 1000);
  }
});

Online Demo: http://jsbin.com/uwiyon/edit#javascript,html

score 1 · Accepted Answer · answered Apr 18 '12 at 21:07

1

Should be something like this:

if ($(this).css('background-color') == 'red') {
   // do somethig
} else {
   // do something else
}

Remember that one equals sign is assignment.

Here is the jsFiddle:

http://jsfiddle.net/F6WeR/1/

answered Apr 18 '12 at 21:07

Kris Krause

7,304
2
23
26

Thanks Guy, sorry for the long time to see how it works just fine! Thanks a lot! – Feel The Noise Apr 19 '12 at 19:05

score 0 · Answer 3 · answered Apr 18 '12 at 21:09

try:

if( $(this).css('backgroundColor').indexOf('#EBE5C5')!=-1 )

with .css and selector you take the value. then you see if the new value is contained

Also this should work but you have to see if the value is returned effectively this value. Check the value first of

$(this).css('backgroundColor')

and then try

if( $(this).css('backgroundColor')=='#EBE5C5' )

score 0 · Answer 4 · answered Apr 18 '12 at 21:09

0

you have to a comparison, "$(this).css("backgroundColor")" returns the backgroundcolor

if ($(this).css("backgroundColor") === "#EBE5C5") {

notice the three equal signs for strict comparison (you could also use "==" but this one is a little bit faster)

answered Apr 18 '12 at 21:09

Tobias Krogh

3,768
20
14