2009-02-10 12 views
10

Estoy tratando de animar el fondo de un hipervínculo ASP.Net para hacer un fundido de color amarillo en una actualización de paneles de actualización. Hasta el momento funciona casi todo el tiempo, pero ocasionalmente se genera un error de javascript "Valor de propiedad no válido". y se depura en el color de jQuery plug-in de código para esta línea ...La animación de color jquery arroja valor de propiedad no válido intermitentemente

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

Aquí es el orden de los acontecimientos a medida que ocurren actualmente ...

En primer lugar, las cargas de las ventanas etc. doc ready se registra un evento que se lleva a cabo cuando el panel de actualización ha terminado refrescante como tal ...

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

Dónde yellowFade se define como ...

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

Ahora, rara vez he tenido que choque a la derecha en este punto, pero normalmente es más tarde, por lo que voy a seguir ...

que luego haga clic en un botón titulado "Generar" que crea una URL carga el ASP .Net hipervínculo con el texto de la dirección URL que creó y luego a través de JavaScript establece que es el color de fondo al color amarillo a desaparecer de a través de este ...

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

que inicialmente había que ajustar el color en el código detrás a través este código ...

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

Pero pensé que tal vez el color de fondo se estaba configurando en algo que el complemento de color jquery no podía reconocer, o desde que se estaba configurando en el lado del servidor el complemento no podía acceder a su estilo o algo, pero cambiarlo todavía tenía no tiene efecto en arreglar el error.

Finalmente, generar cambios en el color de la URL de blanco a amarillo, como he dicho la mayoría de las veces se desvanece bien, pero rara vez arroja un error "Valor de propiedad no válido".

Por lo que puedo decir, mi sintaxis es la correcta para usar las animaciones en color. Siento que el hecho de que estoy usando un panel de actualización podría estar causando estragos aquí, pero no estoy seguro.

¿Alguien tiene alguna idea de lo que podría causar tal cosa? Ha sido un verdadero lío intentar depurar, ya que sucede con poca frecuencia sin tener en cuenta el hecho de que javascript ya es un problema para depurar.

Uso de jquery 1.3.1 y jquery.color 1.0 en Windows Vista. Usando Visual Studio 2008. Avíseme si hay algo que pueda aclarar.

EDIT: Dang, ninguna respuesta aún. Me he tomado un descanso de trabajar en esto, pero acabo de encontrar el error en otra parte de mi aplicación donde estoy haciendo el fundido amarillo. Ambas páginas usan un panel de actualización. No soy fan del panel de actualización en muchos casos y definitivamente ha causado estragos en mi jquery. Me pregunto si tiene algo que ver con esto. Oh, esto fue un poco implícito con todo el aspecto de Vista, pero señalaré que estoy ejecutando en IIS7.

¿Esto provoca alguna idea?

Respuesta

7

Creo que encontré el mismo problema que en otro proyecto; Tenía un DIV dentro de otro DIV (que no tenía su fondo explícitamente definido.) Estaba tratando de "flashear" el color de fondo del DIV interno y me encontré con ese error. Solo después de asignar un color específico al contenedor DIV desapareció el error.

+0

¡Hombre, creo que eso es todo! Voy a dejar de darle la respuesta por el momento, pero tuve la misma situación (un abuelo abuelo sin color de fondo). He probado un montón y el error aún no ha sido devuelto. – Carter

+1

Odiaba el hecho de que era tan impredecible, parece haber funcionado, al menos por el momento. – Rio

+1

Debo añadir que esto solo pareció ayudar a mi problema, pero al final no lo eliminé. Hay un error en jQuery, mira las respuestas a continuación. –

7

Estaba teniendo este mismo problema en IE8 con una animación de color de fondo en algunos elementos de td. Persistió a pesar de que le di un color de fondo al tr.

Creo que lo tengo solucionado ahora, cambiando el código en jquery.ui.

Encontrar esta sección:

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

Para:

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

A veces, cuando se ejecuta este código. fx.State no es 0, pero fx.start y fx.end no se han inicializado como matrices RGB. En el código actualizado, inicializamos las matrices fx.start y fx.end si no se han inicializado.

Parece que lo ha solucionado, pero es difícil estar seguro de un problema intermitente.

Más detalles aquí: http://dev.jqueryui.com/ticket/4251

+0

Configurar el color de fondo principal no funcionó para mí. Pero esta solución sí. – mcqwerty

+0

+1, explicación perfecta + enlace al ticket de Trac, puedo solucionar mi problema con confianza en lugar de vudú :) Por cierto, puedes usar su solución definitiva en lugar de este código: http://github.com/jquery/jquery- ui/commit/217266fb62b821e8edc0aeb37428a7370848e060 – orip

2

Para los que tienen este problema con el jQuery color plugin, un buen truco suficiente es cambiar

if (fx.state == 0) { 

a algo baja, como

if (fx.state <= 0.045) { 

Curiosamente fx .state no siempre es 0, por lo que el error de propiedad no válida se produce ocasionalmente.

+1

-1: el error se debe a una condición de carrera en la que fx.state puede ser mayor que 0 antes de que se haya ejecutado la inicialización. Aceptar valores más altos reduce la ventana para la condición de carrera, pero provoca un recálculo innecesario y la condición de carrera todavía está allí (si el retraso es aún más prolongado por algún motivo). Ver la respuesta de Lance Fisher y los comentarios en http://dev.jqueryui.com/ticket/4251 – orip

2

La corrección en el sitio de jQuery está a continuación (debería estar en una versión futura). En effects.core.js, cambie:

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

Esto borra totalmente el problema para mí.

0

Esto no parece funcionar si está tratando de animar algunos elementos en ciertos navegadores (funciona en Firefox, no en Google Chrome). Por ejemplo, esto no funcionará con un lienzo HTML. fx.start no estará definido.

Mi 'truco' para conseguir que funcione con elementos HTML Canvas, por ejemplo -

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

He reescrito la función de colocador de color, para evitar que se propague NaNs en el valor RGB, esto resuelve el 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

Tengo otra solución, me funciona.Sólo tiene que añadir estas líneas de validación:

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

Antes de esto:

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

que estaba teniendo un problema similar con jquery.color.js. Resolvió esto usando jquery.effects.core.js (jquery ui effects core).

Espero que funcione para usted también.

Cuestiones relacionadas