jqueryのカラーアニメーションが断続的に無効なプロパティ値をスローします

StackOverflow https://stackoverflow.com/questions/530866

質問

私は、更新パネルのリフレッシュに黄色のフェードを行うにはASP.Netハイパーリンクの背景をアニメーション化しようとしています。これまでのところ、それはほとんどすべての時間の中で動作しますが、時折javascriptのエラーがスローされます「無効なPropery値を。」それは、この行にjqueryの色プラグインコードにデバッグ... 

fx.elem.style[attr] = "rgb(" + [
     Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
     Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
     Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
].join(",") + ")";
彼らは、現在起こっているように、

ここではイベントの順序です...

まず、ウィンドウのロードには、更新パネルはそう...

のようにさわやか完了したときに実行されるイベントを登録doc.ready上のように、 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(yellowFade);

yellowFadeは次のように定義されている場合... 

function yellowFade() {
    window.setTimeout("$('#' + hyperlinkUrlId).animate( { backgroundColor: 'white' }, 2000)", 2000);
    window.clearTimeout();
}

...さて、めったに私はそれがこの時点で権利クラッシュしなかったしましたが、一般的に、それは後にあるので、私は続けるよ。

私は、javascriptのは、それがこの経由してからフェードする黄色の背景色ですセットを経由して、それは、その後に作成され、URLのテキストとASP.NetハイパーリンクをロードするURLを作成し、その「生成」と題するボタンをクリックしてください... 

$("#" + hyperlinkUrlId).css("background-color", "#FBFF9C");

私が最初にそれがこのコードを経由しての背後にあるコードで色を設定していた... 

Url.BackColor = ColorTranslator.FromHtml("#FBFF9C");

しかし、私は多分、バックの色はjqueryの色のプラグインが認識できなかったものに設定なっていた、またはそれがサーバ側に設定されていたので、プラグインは、それはそれを変更しますが、スタイルや何かのアクセスではないと考えていましたまだバグを修正に影響を及ぼさなかった。

私はそれがうまくフェードまれに、それは誤り投げていない時間のほとんど言ったように、

最後に、生成は、白から黄色にURLの背中の色を変更し、「無効なプロパティ値を。」

は、私の知る限り、私の構文を言うことができるように、それは色のアニメーションを使用するべきであるだけの方法です。私はUpdatePanelのはここに大混乱をwreakingかもしれないが、私はわからない使用しています事実のように感じます。

誰もがそのようなことを引き起こすかもしれないものに任意の洞察力を持っていますか？それはそれはjavascriptのは、すでにデバッグに痛みであるという事実を無視ので、あまり頻繁に起こるため、デバッグしようとしている本当の混乱をされています。

Windows VistaでのjQuery 1.3.1とjquery.color 1.0を使用しました。私は片付けることができます何があるかどうかのVisual Studio 2008を使用すると、私に教えてくださいます。

編集ダン、まだない単一の応答。私はこれに取り組んでからの活動休止のビットを撮影したが、私はちょうど私が黄色のフェードをやっている私のアプリの別の部分にバグを発見しました。これらのページの両方が更新パネルを使用します。私は、多くの場合、更新パネルのファンではない、それは間違いなく私のjqueryの上で大混乱を引き起こしたしました。それはこれとは何かを持っている場合、私は思ったんだけど。ああ、これは一種の全体Vistaの事を暗示しましたが、私はIIS7上で実行していることを指摘します。

これは任意の洞察力を挑発していますか？

役に立ちましたか？

解決

私は、私は別のプロジェクトであなたと同じ問題に遭遇したと思います。私は別のDIVの内部DIV持っていた（それは背景が明示的に定義されていますがありませんでした。）私は、「フラッシュ」内側のDIVの背景色にしようとしていたし、そのエラーに走っていました。私はコンテナに特定の色を割り当てられた後にのみDIVにエラーが離れて行きました。

他のヒント

私はいくつかのTD elemtentsの背景色をアニメーションでIE8でこの同じ問題を抱えていました。それは私がTRに背景色を与えたにもかかわらず持続します。

私はそれがjquery.uiにいくつかのコードを変更することで、現在では修正があると思います。

このセクションを見つけます：

// We override the animation for all of these color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (fx.state == 0) {

変更：

if (fx.state == 0)

宛先：

if (fx.state == 0 || fx.start.constructor != Array || fx.end.constructor != Array)

時には、このコードが実行されるとき。 fx.Stateは0ではありませんが、fx.startとfx.endはRGB配列として初期化されていません。彼らは初期化されていない場合は更新されたコードでは、我々はfx.startとfx.end配列を初期化ます。

それはそれを修正しているようだが、それは断続的な問題に確認するのは難しいます。

ここでは詳細： http://dev.jqueryui.com/ticket/4251する

jQueryの色のプラグインを用いてこの問題を有するものについては、良い十分なハックを変更することです。

if ( fx.state == 0 ) {

タグのような低いものに 
if ( fx.state <= 0.045 ) {

奇妙なfx.stateは無効なプロパティのエラーが時折スローされます理由である、常に0ではありません。

jQueryのサイト上での修正は（将来のリリースでなければなりません）以下です。 effects.core.jsで、変更：

if ( fx.state == 0 ) {
    fx.start = getColor( fx.elem, attr );
    fx.end = getRGB( fx.end );
}

と

if (!fx.colorInit) {
    fx.start = getColor(fx.elem, attr);
    fx.end = getRGB(fx.end);
    fx.colorInit = true;
}

これは完全に私のための問題をクリアします。

私は、この問題を解決し、NaNのは、RGB値へ伝播を防止するために、色のsetter関数を書き換えてきます。

var r = Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0);
var g = Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0);
var b = Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0);
if (!isNaN(r) && !isNaN(g) && !isNaN(b))
{
    var rgb = "rgb(" + [r,g,b].join(",") + ")";
    fx.elem.style[attr] = rgb;
}

私はjquery.color.jsと同様の問題を抱えていました。 jquery.effects.core.js（jQueryのUI効果コア）を使用してこれを解決します。

私はそれは同様にあなたのために働く願っています。

私は別の解決策は、それは私のために動作しています。ただ、これらの検証の行を追加します：

if (fx.start == undefined) { fx.start = getRGB('white'); } 
if (fx.end == undefined) { fx.end = getRGB('white'); }

この前：

fx.elem.style[attr] = "rgb(" + [
 Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
 Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
 Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)].join(",") + ")";

これは、あなたが特定のブラウザでいくつかの要素をアニメーション化（ないGoogle Chromeで、Firefoxで動作します）しようとしている場合に動作するようには表示されません。たとえば、これはHTMLキャンバスでは動作しません。 fx.startは定義されません。

私のそれは例えばHTMLのCanvas要素を動作させるためにハック「」 - 

if (fx.start == undefined) { fx.start = getRGB('white'); }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top