jQuery 애니메이션 코드가 Google 크롬에서 작동하지 않습니다. 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); 

이 파이어 폭스에서 작동하지만 크롬에.

그러나 doItOn(table.find("tr"));을 $("body").append(table); 아래로 이동하면 둘 다 작동합니다. (JSFiddle 2)

왜 이런 일이 발생합니까?

편집 : jQuery는 backgroundColor 애니메이션을 지원하지 않으므로 jQueryUI도 사용하고 있습니다.

Answer 1

예기치 않은 동작 일 수 있습니다. JQuery와 문서는 .animate() 기능이 말할 :

모든 애니메이션 속성

아래에 언급 된 경우를 제외하고 하나의 수치로 움직이는한다; 숫자가 아닌 대부분의 속성은 jQuery.Color() 플러그인을 사용하지 않는 한 기본 jQuery 기능을 사용하여 애니메이션 할 수 없습니다. 예를 들어 width, height 또는 left는 애니메이션으로 표시 할 수 있지만 background-color은이 될 수 없습니다. 달리 지정되지 않는 한 속성 값은 픽셀 수로 처리됩니다. 해당되는 경우 em 및 % 단위를 지정할 수 있습니다.

편집 : jQuery UI를 사용할 때는 적용되지 않습니다.