I'm trying to animate the background color of a div onclick but it's simply not changing it:

HTML

```
<div id="list2" onclick="changeCol();">
    color
</div>

```

CSS

`#list2{ width:200px; height:100px; border:1px solid #ccc; background-color:#ccc}`

JQuery/JS

```
function changeCol(){
    alert('foo'); // testing function called
    $("#list2").animate({
      backgroundColor: "#8bed7e"
    }, 500).animate({
      backgroundColor: "#ccc"
    }, 500);
}

```

Any ideas why? [Here's a fiddle](http://jsfiddle.net/darrensw/qggyec4t/3/)