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

Answer 1

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/