Question

好的，所以我有这个代码，它动画了表元素的背景。

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时不适用。

jQuery动画代码无法在Google Chrome上运行，适用于Firefox

1 个答案: