jquery中的animate函数不能实现颜色变化

写2048小游戏的时候，随机出现一个数字，利用animate函数中设置num-cell的宽高以及位置样式，都没问题，但是color和backgroundColor一直加不上，后来发现动画的属性必须是数字的，比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的；background-color、color这些属性不是数字，在不用插件的情况下将不能动画化。
错误代码：

function showNumberWithAnimation(x, y, num) {
    var cell = $("#num-cell-" + x + "-" + y);

    cell.text(num);
    cell.animate({
        color: getColor(num),
        backgroundColor: getBackgroundColor(num),
        left: getLeftPos(x, y) + 'px',
        top: getTopPos(x, y) + 'px',
        width: 2 * rem,
        height: 2 * rem
    }, 50);
}

修改后

function showNumberWithAnimation(x, y, num) {
    var cell = $("#num-cell-" + x + "-" + y);

    cell.css({
        "color": getColor(num),
        "backgroundColor": getBackgroundColor(num)
    });
    cell.text(num);

    cell.animate({
        left: getLeftPos(x, y) + 'px',
        top: getTopPos(x, y) + 'px',
        width: 2 * rem,
        height: 2 * rem
    }, 50);
}