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 divs depend

Answer 1

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;
}

  

    
Animate
    

      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    
  

Toggle Effect

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