Animate not working as expected

Question

This is my jQuery function:

var flashField = function ($field) {
    var colour = $field.css('background-color'); // gets colour ok
    $field.css( 'backgroundColor', '#FF0000' ); // sets background ok
    $field.animate({ 'backgroundColor': colour }, 1500); // nada
}

I want to grab the element's current background, switch it to red and then fade back to the original colour.

However the animate function doesn't do anything and no errors are shown in the console.

What have I done wrong? Have tried searching but can't find anything that shows bad syntax or whatever.

(testing in Chrome 45.0.2454.93 m)

Answer 1

You need to use jquery-ui.js to animate colours. From the documentation:

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

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