div颜色在.animate（）中不变

Question

I am trying to change the colour of a div randomly on each mouse click but its not changin colour:

div.on('mousedown', function () {
    var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
    points += 1;
    div.animate({color: newColor}, 2000);
    $('#total-points').text(points);
});

Through debugging I can confirm that newColour has been set and animate() has been called on the div .

Also I have jQueryUI referenced to its script in the local project directory <script src="jQueryUI.js"></script>

I suspect that it maybe something to do with the div's css properties overriding but not too sure where to go from here.

Here is the JSFiddle that displays the problem

Answer 1

you need to use backgroundColor and not color in order to change the box background. also i loaded jquery and jquery UI scripts from CDN and not locally.

    div.on('mousedown', function () {
    var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
    points += 1;
    div.animate({backgroundColor: newColor}, 2000);
    $('#total-points').text(points);
});

I forked your JSFiddle scripts and created a new one. You can find it in here