jQuery Animate not working on background-color property

Question

I was playing around with the jQuery .animate() function, and ended up trying to change the background-color of one of the div s depending on the number of pixels scrolled by the user. To my surprise, it did not work. I tried using the .css() function instead, and it worked well. Please refer the jsFiddle link at the bottom.

Could somebody explain to me why this is happening?

The jsFiddle link : https://jsfiddle.net/ag_dhruv/cb2sypmu/

Answer 1

As per jQuery API docs :

The .animate() method allows us to create animation effects on any numeric CSS property .

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width , height , or left can be animated but background-color cannot be , unless the jQuery.Color plugin is used)

^{emphasis is mine}

Background Color is not a numeric property and so it cannot be animated using .animate() .

Answer 2

If you want to animate the background-color property, you need to either include jQueryUI or add this plugin:

 $(function() { var state = true; $("#button").click(function() { if (state) { $("#effect").animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000); } else { $("#effect").animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000); } state = !state; }); }); 

 .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Animate</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div> </div> <button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button> 

jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors.

Answer 3

Just an addition to existing answers: if you don't want to use jQuery UI for this, you can use this jQuery plugin (2.7kB only):

http://www.bitstorm.org/jquery/color-animation/

You can download jquery.animate-colors.js or jquery.animate-colors.min.js from the project's website, or include it from CDN:

<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

After including you can use color animations the following way:

$('#demodiv').animate({color: '#E4D8B8'})
$('#demodiv').animate({backgroundColor: '#400101'})
$('#demodiv').animate({borderBottomColor: '#00346B'})
$('#demodiv').animate({borderColor: 'darkolivegreen'})
$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'})

Answer 4

You can animate the backgroundColor only with jQueryUI. If you don't want to use jQueryUI you will need to just change a class and have the animation made in CSS using transitions.

Answer 5

You can also animate the background color with jQuery, just not with the animate() method, as you have noticed, the css method will do.

Since this is a very easy thing, do not include another library to the code, spare yourself the http requests and just do it with plain JS.

This function will do just fine:

function changeBG(el,clr){
var elem = document.getElementById(el);
elem.style.transition = "background 1.0s linear 0s";
elem.style.background = clr;
}

Link to working example

http://codepen.io/damianocel/pen/wMKowa