jquery Farbanimation wirft Ungültiger Eigenschaftswert intermittierend

Question

Ich versuche, den Hintergrund zu animieren für ein ASP.Net Hyperlink ein gelbes verblassen an einem Update-Panels aktualisieren zu tun. Bisher funktioniert es fast die ganze Zeit, aber gelegentlich ein Javascript-Fehler ausgelöst „Invalid Propery Wert.“ und es debuggt in die jquery Farbe Plug-in-Code zu dieser Zeile ...

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

Hier ist die Reihenfolge der Ereignisse, wie sie zur Zeit geschehen ...

Als erstes wird die Fenster Lasten so auf doc.ready es ein Ereignis registriert durchgeführt werden, wenn der Update-Panel beendet wie so erfrischend ...

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

Wo yellowFade ist definiert als ...

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

Nun, selten habe ich hatte es richtig an dieser Stelle abstürzen aber in der Regel ist es später, also werde ich weiter ...

Ich klicke dann auf eine Schaltfläche Titel „Generieren“ Das schafft eine URL den ASP.Net Hyperlink mit dem Text für die URL lädt es erstellt und dann über JavaScript setzt es die Hintergrundfarbe der gelben Farbe ist von über diese verblassen ...

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

Ich hatte es zunächst die Farbe in der Code-behind über diese Code-Einstellung ...

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

Aber dann dachte ich, vielleicht die Hintergrundfarbe wurde die jquery Farbe Plug-in etwas gesetzt bekommen konnte nicht erkennen, oder weil es war, konnte Server-Seite des Plug-in gesetzt wird Zugriff nicht, es ist Stil oder etwas, aber es ändert hatte noch keine Auswirkungen auf den Fehler beheben.

Schließlich erzeugen Änderungen der Hintergrundfarbe der URL von weiß bis gelb dann, als ich die meiste Zeit sagte es ganz gut verblasst aber selten wirft er einen Fehler „Ungültiger Eigenschaftswert.“

Soweit ich meine Syntax sagen kann, nur die Art und Weise ist es für die Verwendung der Farbanimationen sein sollte. Ich fühle mich wie die Tatsache, dass ich ein Update bin mit könnte hier Chaos wird anrichtet, aber ich bin mir nicht sicher.

Hat jemand einen Einblick in das, was verursachen könnte so etwas tun? Es ist ein echtes Chaos versucht, zu debuggen, da es so selten ist nun mal die Tatsache abgesehen, dass Javascript ist bereits ein Schmerz zu debuggen.

Mit jQuery 1.3.1 und jquery.color 1.0 auf Windows Vista. Visual Studio 2008. Lassen Sie mich wissen, ob es etwas, das ich klären kann.

EDIT: Dang, nicht eine einzige Antwort noch. Ich habe ein bisschen eine Pause von der Arbeit an diese genommen, aber ich habe gerade den Fehler in einem anderen Teil meiner app, wo ich die gelben verblassen tue. Beide Seiten verwenden, um ein Update-Panel. Ich bin kein Fan des Update-Panel in vielen Fällen, und es hat auf jeden Fall wreaked Chaos auf meiner Jquery. Ich frage mich, ob es etwas damit zu tun hat. Oh, war diese Art des impliziert mit der ganzen Sache Vista, aber ich werde darauf hinweisen, dass ich auf IIS7 renne.

Hat provozieren dies irgendwelche Einsichten?

Answer 1

Ich glaube, ich in das gleiche Problem wie Sie lief an einem anderen Projekt; Ich hatte ein DIV innerhalb eines anderen DIV (die es nicht haben ist Hintergrund explizit definiert.) Ich habe versucht, die Hintergrundfarbe des inneren DIV zu „Flash“ und wurde in diesen Fehler ausgeführt wird. Erst nachdem ich eine bestimmte Farbe zu dem Container zugewiesen DIV ist der Fehler weg.

Answer 2

Ich habe das gleiche Problem in IE8 mit einer Hintergrundfarbe Animation auf einiger td elemtents. Es blieb, obwohl ich eine Hintergrundfarbe der tr gab.

Ich glaube, ich habe es jetzt behoben, durch einen Code in jquery.ui ändern.

Finden Sie diesen Abschnitt:

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

Ändern:

if (fx.state == 0)

An:

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

Manchmal, wenn dieser Code ausgeführt wird. fx.State nicht 0 ist, aber fx.start und fx.end nicht als RGB-Arrays initialisiert wurde. In dem aktualisierten Code initialisieren wir die fx.start und fx.end Arrays, wenn sie nicht initialisiert wurden.

Das scheint es behoben zu haben, aber es ist schwer, sicher auf ein zeitweiliges Problem zu sein.

Weitere Informationen finden Sie hier: http://dev.jqueryui.com/ticket/4251

Answer 3

Für diejenigen, die dieses Problem mit der jQuery-Plugin Farbe , gut genug Hack

ändern

if ( fx.state == 0 ) {

zu etwas niedrig wie

if ( fx.state <= 0.045 ) {

Seltsamer fx.state ist nicht immer 0, weshalb die ungültige Eigenschaft Fehler gelegentlich geworfen wird.

Answer 4

Das Update auf der jQuery-Website unter (in einer zukünftigen Version sein soll). In effects.core.js ändern:

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

zu:

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

Das vollständig das Problem sich für mich gelöscht.

Answer 5

ich die Farbe Setter-Funktion neu geschrieben habe, um zu verhindern NaNs in den RGB-Wert propagiert, löst dies das Problem.

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

Ich habe ähnliches Problem mit jquery.color.js. Gelöst dies durch die Verwendung jquery.effects.core.js (jquery ui Effekte Kern).

Ich hoffe, dass es für Sie funktioniert auch.

Answer 7

Ich habe eine andere Lösung, es funktioniert für mich. Fügen Sie einfach diese Validierung Zeilen:

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

Vor diesem:

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

Dies scheint nicht zu funktionieren, wenn Sie einige Elemente in bestimmten Browsern zu animieren versuchen (funktioniert in Firefox, nicht in Google Chrome). Zum Beispiel wird dies nicht mit einem HTML-Canvas arbeiten. fx.start undefiniert.

Mein ‚hacken‘, um es mit HTML-Canvas-Elementen zum Beispiel zur Arbeit -

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