Jquery Animate Not Working On Background-color Property

I was playing around with the jQuery .animate() function, and ended up trying to change the background-color of one of the divs depending on the number of pixels scrolled by the us

Solution 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)

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

Solution 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: .5em1em;
  text-decoration: none;
}
#effect {
  width: 240px;
  height: 135px;
  padding: 0.4em;
  position: relative;
  background: #fff;
}
#effecth3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
}

<linkhref="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script><scriptsrc="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><divclass="toggler"><divid="effect"class="ui-widget-content ui-corner-all"><h3class="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><buttonid="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.

Solution 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:

<scriptsrc="//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)'})

Solution 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.

Solution 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:

functionchangeBG(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