jquery - jQuery 动画代码在 Google Chrome 上不起作用，在 Firefox 上起作用

Question

好的，所以我有这段代码，它为表格元素的背景设置动画。

JSFiddle 1

HTML：

<table>
    <tr>
        <td id="foo2">Some Random Text</td>
    </tr>
</table>

JS：

function doItOn(el) {    
    var backgroundColor = el.css("backgroundColor");
    el.css("backgroundColor", "yellow");
    el.animate({backgroundColor: backgroundColor}, 2000);
}

var table = $("<table><tr><td>Dynamic td</td></tr></table>");

doItOn($("#foo2"));
doItOn(table.find("tr"));

$("body").append(table);

这适用于 Firefox，但不适用于 Chrome。

但是，如果我移到doItOn(table.find("tr"));下面$("body").append(table);，它在两者中都有效。（JSFiddle 2）

为什么会这样？

编辑：我也在使用 jQueryUI，因为 jQuery 不支持 backgroundColor 动画。

Answer 1

这可能是不可预测的行为。jQuery 文档对这个.animate()函数说：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但background-color不能进行动画处理，除非使用了 jQuery.Color() 插件）。除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。

编辑：这在使用 jQuery UI 时不适用。