How to animate background color in jQuery?

Question

What am I doing wrong that the following doesn't animate the background color?

<div style="height:100px;width:100px;background:red">animate this</div><br>
<input type="button" id="mybutton" value="start"/><br>


$("#mybutton").click(function(){
   $("div").animate({backgroundColor: 'blue'});
});

http://jsfiddle.net/bjf2L0ha/

Answer 1

You need to import an additional plugin such as jQuery UI in order to support color in your animate() function as jQuery alone doesn't.

$("#colorBtn").click(function() {
  $('#demodiv').animate({backgroundColor: 'blue'})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="button" id="colorBtn" value="Change Color"/><br>

<div id="demodiv" style="height:100px;width:100px;background:red"></div>