2009-02-10 10 views
10

Sto cercando di animare lo sfondo per un collegamento ipertestuale ASP.Net per eseguire una dissolvenza gialla su un aggiornamento dei pannelli di aggiornamento. Finora funziona quasi sempre, ma a volte viene generato un errore javascript "Valore di proprietà non valido". ed esegue il debug nel colore jquery plug-in codice per questa linea ...l'animazione del colore jquery genera Valore di proprietà non valido in modo intermittente

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(",") + ")";

Ecco l'ordine degli eventi così come sono attualmente accadendo ...

In primo luogo, i carichi delle finestre così via doc .ready registra un evento da eseguire quando il pannello di aggiornamento è terminato rinfrescante modo ...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(yellowFade); 

Dove yellowFade è definito come ...

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

Ora, raramente ho avuto crash di destra a questo punto, ma in genere è più tardi, quindi io continuerò ...

ho quindi fare clic su un pulsante denominato "Generate" che crea un URL carica l'ASP .Net collegamento ipertestuale con il testo per l'URL che ha creato e poi via javascript imposta è colore di sfondo al colore giallo a svanire da via questo ...

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

ho inizialmente era che l'impostazione del colore nel codice dietro via questo codice ...

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

Ma poi ho pensato che forse il back color si stava impostando su qualcosa che il plug-in jquery non poteva riconoscere, o dal momento che era impostato sul lato server il plug-in non poteva accedere al suo stile o qualcosa, ma cambiandolo aveva ancora nessun effetto sulla correzione del bug.

Infine, genera il colore di sfondo dell'URL da bianco a giallo, quindi come ho detto la maggior parte delle volte si dissolve correttamente ma raramente genera un errore "Valore di proprietà non valido".

Per quanto posso dire la mia sintassi è proprio come dovrebbe essere per l'utilizzo delle animazioni di colore. Sento che il fatto che sto usando un updatepanel potrebbe causare il caos qui, ma non ne sono sicuro.

Qualcuno ha qualche idea su cosa potrebbe causare una cosa del genere? È stato un vero disordine tentare di eseguire il debug poiché succede così raramente a prescindere dal fatto che javascript sia già un problema da debugare.

Utilizzo di jQuery 1.3.1 e jquery.color 1.0 su Windows Vista. Utilizzo di Visual Studio 2008. Fammi sapere se c'è qualcosa che posso chiarire.

MODIFICA: Dang, non una singola risposta ancora. Ho preso un po 'di pausa dal lavorare su questo, ma ho appena trovato il bug in un'altra parte della mia app in cui sto facendo la dissolvenza gialla. Entrambe queste pagine usano un pannello di aggiornamento. Non sono un fan del pannello di aggiornamento in molti casi e ha sicuramente devastato il mio jQuery. Mi chiedo se abbia qualcosa a che fare con questo. Oh, questo è stato un po 'implicito con l'intera cosa Vista, ma farò notare che sto girando su IIS7.

Ciò provoca qualche intuizione?

risposta

7

Penso di aver avuto lo stesso problema con te in un altro progetto; Ho avuto un DIV all'interno di un altro DIV (che non aveva il suo background esplicitamente definito.) Stavo cercando di "lampeggiare" il colore di sfondo del DIV interno e stavo correndo in quell'errore. Solo dopo che ho assegnato un colore specifico al contenitore DIV, l'errore è scomparso.

+0

Uomo, penso sia! Sto ancora cercando di darti la risposta, ma ho avuto la stessa situazione (un div grandparent senza colore di sfondo). Ho provato un sacco e l'errore è ancora non restituito. – Carter

+1

Odiavo il fatto che fosse così imprevedibile - sembra che abbia funzionato, almeno per il momento. – Rio

+1

Dovrei aggiungere che questo sembra solo aiutare il mio problema, ma alla fine non l'ho eliminato. C'è un bug in jQuery, vedi le risposte qui sotto. –

7

Stavo avendo lo stesso problema in IE8 con un'animazione di colore di sfondo su alcuni td elemtents. Persisteva anche se davo un colore di sfondo al tr.

Penso di averlo risolto ora, cambiando qualche codice in jquery.ui.

Trova questa sezione:

// 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) { 

Cambio:

if (fx.state == 0) 

A:

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

A volte, quando viene eseguito questo codice. fx.State non è 0, ma fx.start e fx.end non sono stati inizializzati come array RGB. Nel codice aggiornato inizializziamo gli array fx.start e fx.end se non sono stati inizializzati.

Sembra averlo risolto, ma è difficile essere sicuri di un problema intermittente.

Maggiori dettagli qui: http://dev.jqueryui.com/ticket/4251

+0

L'impostazione del colore di sfondo genitore non ha funzionato per me. Ma questa soluzione ha fatto. – mcqwerty

+0

+1, spiegazione perfetta + link al ticket Trac, posso risolvere il mio problema con sicurezza invece di voodoo :) BTW - puoi usare la loro correzione finale invece di questo codice: http://github.com/jquery/jquery- ui/commit/217266fb62b821e8edc0aeb37428a7370848e060 – orip

2

Per coloro che hanno questo problema con il jQuery color plugin, un buon trucco abbastanza è quello di cambiare

if (fx.state == 0) { 

a qualcosa di basso come

if (fx.state <= 0.045) { 

Stranamente fx .state non è sempre 0, motivo per cui l'errore di proprietà non valido viene generato occasionalmente.

+1

-1: l'errore è causato da una condizione di competizione in cui fx.state può essere maggiore di 0 prima dell'esecuzione dell'inizializzazione. L'accettazione di valori maggiori riduce la finestra per la condizione della competizione, ma causa una ricomposizione inutile e la condizione della competizione è ancora lì (se il ritardo si allunga per qualche motivo). Vedi la risposta di Lance Fisher e i commenti su http://dev.jqueryui.com/ticket/4251 – orip

2

La correzione sul sito jQuery è riportata di seguito (dovrebbe essere in una versione futura). In effects.core.js, modificare:

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

a:

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

Questa totalmente eliminato il problema per me.

0

Questo non sembra funzionare se si sta tentando di animare alcuni elementi in alcuni browser (funziona in Firefox, non in Google Chrome). Ad esempio, questo non funzionerà con una tela HTML. fx.start sarà indefinito.

mio 'trucco' per farlo funzionare con gli elementi HTML Canvas per esempio -

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

Ho riscritto la funzione setter di colore, per evitare NaNs propagare nel valore RGB, questo risolve il problema.

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; 
} 
1

Ho un'altra soluzione, funziona per me.Basta aggiungere queste linee di convalida:

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

Prima di questo:

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(",") + ")"; 
1

ho avuto problema simile con jquery.color.js. Risolto questo usando jquery.effects.core.js (core effetti jquery ui).

Spero che funzioni anche per voi.