jquery background-color rgb conditional mistake

Question

I have tested the rest of my code and is ok, but does not work inside here.

this is the part of the code that has mistakes or something.

if(bgc.css("background-color") == "rgb(38,64,163)") {
    bgc.animate({backgroundColor:"rgb(134,210,239)"},800, function() {
        $previousAnchor = $anchor,
        $anchor.fadeIn(fadetime);
    });
} else if(bgc.css("background-color") == "rgb(134,210,239)") {
    bgc.animate({backgroundColor:"rgb(38,64,163)"},800, function() {
        $previousAnchor = $anchor,
        $anchor.fadeIn(fadetime);
    });
}

Note that "$previousAnchor" "$anchor" and "bgc" are variables. I had investigated all of this code, and there has to be a problem in "backgroundColor" animate of Jquery, but i dont know how to fix it.

Edited:

I fixed the if statment, putting Spaces in the RGB code like this

if(bgc.css("background-color") == "rgb(38, 64, 163)")

now it goes inside, but animate does not work yet. It does nothing and continue to the rest of the callback function.

EDITED SOLVED

For all the people that have problems with BACKGROUND-COLOR animate jquery, you need this: github.com

You need a pluging called jquery.color.js

it was a mistake copying it to here, but it is in the code, can i set RGB colors on animate jquerys? — Ignacio Bustos, Dec 20 '12 at 20:29

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

Add the following JS (jQuery color plugin), (minified version from here)

(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.css(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);

Test Example :

var element = $("#test");
$('#test').click(function() {
    if (element.css("background-color")==="rgba(0, 0, 0, 1)") {
        element.animate({ backgroundColor: "blue" }, 'fast');
    }else{
        element.animate({ backgroundColor: "red" }, 'fast');
    }
});

Here is a fiddle : http://jsfiddle.net/GMNV9/1/

exacly i just found it 5 seconds ago! but thanks you so much! — Ignacio Bustos, Dec 20 '12 at 21:12

jquery background-color rgb conditional mistake

1 Answers1