jQuery changing DIV background with Animation

Question

i have these peice of code below that ive written but does not seem to be working for me and wondering if anyone knew why.

I have a set background on the DIV but when hover i want to animate to the new colour and then back when you mouseout, works if i use opacity but need to set as colours instead.

<div class="blue">this is the content area</div>

<style>
.blue { background: #006699; }
</style>

<script>
$(document).ready(function(){
  $(".blue").hover(
    function() {
      $(this).animate({ backgroundColor:'#003d7b' }, 1000);
    },
    function() {
      $(this).animate({ backgroundColor:'#006699' }, 1000); 
    });
});
</script>

Thanks

Be sure to reference the relevant parts of the [jQuery UI Library](http://jqueryui.com/) when animating colours. See [here](http://jsfiddle.net/z986moeu/) — George, Sep 08 '14 at 15:05
Im using Foundation 5 framework, but let me see if it actually loads UI in — James Brandon, Sep 08 '14 at 15:08

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

you cant animate the background color by default as the easing is not included into jquery

check this post: jQuery animate backgroundColor

you dont have to include the whole jquery-ui but only the bacgroundcolor easings

(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);

Ill give that a go now, good dont have to load the whole UI - let me come back to you. — James Brandon, Sep 08 '14 at 15:09
yep works great, well in my CSS i have !important set so its being overrideen but i need it for other areas of the site as only animating certain boxes. Can i made the JS backgroundColor important so it sets inline when it generates the inline style? — James Brandon, Sep 08 '14 at 15:14
once important is set it means that its not overridable anymore, just avoid using important :/ , sure there is a workaround by using more suitable selectors — john Smith, Sep 08 '14 at 15:16

score -2 · Answer 2 · answered Sep 08 '14 at 15:09

-2

Change

$(this).animate({ backgroundColor:'#003d7b' }, 1000);

TO

$(this).animate({ background-color:'#003d7b' }, 1000);

You forgot the -

answered Sep 08 '14 at 15:09

PieterSchool

499
4
15

That's invalid syntax. – George Sep 08 '14 at 15:09
Hi Pieter, FYI, that syntax (`backgroundColor`) is fine. JavaScript can use CSS properties that have an hyphen if you write them in camel case. Also, `-` is an invalid character when naming an object property. You need to put them in quotation marks, like that : `{'background-color' : '#fff'}`. Lastly, jQuery can't animate color. Atleast not without an extension. – Karl-André Gagnon Sep 08 '14 at 15:12

jQuery changing DIV background with Animation

2 Answers2