div颜色在.animate（）中不变

Question

我试图在每次单击鼠标时随机更改div的颜色，但不能更改颜色：

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

通过调试，我可以确认已设置newColour并在div上调用了animate() 。

另外，我在本地项目目录<script src="jQueryUI.js"></script>

我怀疑这可能与div's css属性覆盖有关，但并不太确定从这里到哪里。

这是显示问题的JSFiddle

Answer 1

您需要使用backgroundColor而不是color来更改框背景。 我也从CDN而不是本地加载了jquery和jquery UI脚本。

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

我分叉了您的JSFiddle脚本并创建了一个新脚本。 你可以在这里找到