javascript - 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已设置并且animate()已在 div 上被调用.

另外，我在本地元素目录中引用了 jQueryUI 脚本 <script src="jQueryUI.js"></script>

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

这是 JSFiddle显示问题

Answer 1

您需要使用 backgroundColor 而不是颜色来更改框背景。我还从 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);
});

我 fork 了您的 JSFiddle 脚本并创建了一个新脚本。您可以在 here 中找到它