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腳本並創建了一個新腳本。 你可以在這里找到