jQuery動畫代碼在Google Chrome上不起作用，適用於Firefox

好的，所以我有這個代碼，它激活了表格元素的背景。jQuery動畫代碼在Google Chrome上不起作用，適用於Firefox

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動畫。

來源

2012-08-09 user1527166

在Safari（Mac）上，即使Safari和Chrome共享相同的佈局引擎，兩個Fiddles也能正常工作。你使用的是什麼操作系統和瀏覽器版本？ – 2012-08-09 22:41:45

您的第一個小提琴會在Chrome中引發錯誤，但第一個不會。有點有道理，因爲您試圖爲尚未添加到DOM的元素的背景顏色設置動畫。 – MrOBrian 2012-08-09 22:41:47

@RandyMarsh Chrome 21，Mac 10.7.2上的Firefox 15。你在Chrome上試過了嗎？ – user1527166 2012-08-09 22:43:40

這可能是不可預知的行爲。 jQuery的文檔說.animate()函數這個：

所有的動畫屬性應該動畫到一個單一的數值，除非如下所述;大多數非數字屬性不能使用基本jQuery功能進行動畫製作（例如，寬度，高度或左側可以爲動畫，但background-color不能爲，除非使用了jQuery.Color（）插件）。除非另有說明，否則屬性值視爲像素數。可以指定單位em和％。

編輯：這不適用於使用jQuery UI時。

來源

2012-08-09 22:35:26

對不起，忘了提及，我也使用jQuery UI。 – user1527166 2012-08-09 22:38:00

@ user1527166啊。然後你失去了我 - 我不是一個普通的jqui用戶... :-p – 2012-08-09 22:39:17

jQuery動畫代碼在Google Chrome上不起作用，適用於Firefox

回答

相關問題