0

テーブル要素の背景をアニメーション化するこのコードがあります。

JSFミドル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 )

なぜこれが起こるのですか？

編集: jQuery は backgroundColor アニメーションをサポートしていないため、jQueryUI も使用しています。

4

1 に答える 1

0

それはおそらく予測不可能な行動です。jQueryのドキュメントでは、.animate()関数について次のように述べています。

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値でないほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化できません (たとえば、幅、高さ、または左はアニメーション化できますが、jQuery.Color() プラグインを使用しない限り、アニメーション化background-colorできません)。特に指定がない限り、プロパティ値はピクセル数として扱われます。必要に応じて、単位 em および % を指定できます。

編集: jQuery UI を使用する場合、これは適用されません。

于 2012-08-09T22:35:26.167 に答える