animazione di colore jquery getta valore di proprietà non valido in modo intermittente

Question

Sto cercando di animare lo sfondo per un collegamento ipertestuale ASP.Net fare una dissolvenza di colore giallo su un aggiornamento pannelli rinfrescano. Finora funziona quasi tutto il tempo, ma di tanto in tanto un errore di javascript è gettato "Valore Propery non valido." ed esegue il debug nel colore jquery plug-in codice per questa riga ...

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 di finestra 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 giusto a questo punto, ma in genere è tardi, quindi mi segue ...

Ho quindi clic su un pulsante denominato "Generate" che crea un URL carica il collegamento ipertestuale ASP.Net 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");

Inizialmente ho avuto l'impostazione del colore nel codice dietro tramite questo codice ...

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

Ma poi ho pensato che forse il colore posteriore si stava impostata su qualcosa che il plug-in jQuery colore non poteva riconoscere, o da quando è stato stato impostato lato server il plug-in non potuto accedere il suo stile o qualcosa del genere, ma cambiarla ancora non ha avuto effetto, che fissa il bug.

Infine, generare cambiamenti colore di sfondo del URL dal bianco al giallo poi come ho detto la maggior parte del tempo si affievolisce bene ma raramente si genera un errore "valore di proprietà non valido."

Per quanto posso dire la mia sintassi è solo il modo in cui dovrebbe essere per utilizzare le animazioni di colore. Mi sento come il fatto che sto usando un UpdatePanel potrebbe essere scatenando il caos qui, ma non sono sicuro.

Qualcuno ha qualche indicazioni su ciò che potrebbe causare una cosa del genere? E 'stato un vero e proprio pasticcio cercando di eseguire il debug di quanto accade così raramente trascurando il fatto che JavaScript è già un dolore per eseguire il debug.

utilizzando jQuery 1.3.1 e jquery.color 1.0 in Windows Vista. Utilizzando Visual Studio 2008. Fammi sapere se c'è qualcosa che posso chiarire.

Modifica Dang, non un singolo ancora risposta. Ho preso un po 'di pausa dal lavoro su questo, ma ho appena scoperto il bug in un'altra parte della mia app in cui sto facendo la dissolvenza giallo. Entrambe queste pagine utilizzare un pannello di aggiornamento. Io non sono un fan del pannello di aggiornamento, in molti casi, e sicuramente ha provocato il caos sulla mia jQuery. Mi chiedo se ha qualcosa a che fare con questo. Oh, questo è stato sorta di implicita con tutta la faccenda Vista ma io sottolineare che sono in esecuzione su IIS7.

Questo provoca alcun intuizioni?

Answer 1

Credo di aver incontrato lo stesso problema come voi su un altro progetto; Ho avuto un DIV all'interno di un altro DIV (che non ha avuto il suo sfondo esplicitamente definito.) Stavo cercando di "flash" il colore di sfondo DIV interno e correvo in quell'errore. Solo dopo ho assegnato un colore specifico al contenitore DIV ha l'errore di andare via.

Answer 2

ho avuto questo stesso problema in IE8 con un'animazione colore di sfondo su alcuni elemtents td. E persisteva anche se ho dato un colore di sfondo per la tr.

Credo di avere riparato 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) {

Modifica:

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 è stato inizializzato come array RGB. Nel codice aggiornato, inizializziamo gli array fx.start e fx.end se non sono stati inizializzati.

che sembra aver risolto, ma è difficile essere sicuri su un problema intermittente.

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

Answer 3

Per coloro che hanno questo problema con la jQuery colore plug , un buon trucco è quello di cambiare abbastanza

if ( fx.state == 0 ) {

a qualcosa di basso come

if ( fx.state <= 0.045 ) {

Stranamente fx.state non è sempre 0, che è il motivo per cui l'errore di proprietà non valido si butta di tanto in tanto.

Answer 4

La correzione sul sito di jQuery è al di sotto (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.

Answer 5

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

Answer 6

ho avuto problema simile con jquery.color.js. Risolto questo utilizzando jquery.effects.core.js (jQuery UI effetti core).

Mi auguro che funziona per voi pure.

Answer 7

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

Answer 8

Questo non sembra funzionare se si sta cercando 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.

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

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