jquery颜色动画间歇性地抛出无效的属性值

Posted 2023-05-08

【中文标题】jquery颜色动画间歇性地抛出无效的属性值

【英文标题】：jquery color animation throws Invalid property value intermittently

【发布时间】：2010-10-06 13:30:24

【问题描述】：

我正在尝试为 ASP.Net 超链接的背景设置动画，以便在更新面板刷新时进行黄色淡入淡出。到目前为止，它几乎一直都在工作，但偶尔会抛出一个 javascript 错误“无效的属性值”。并将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();

现在，我很少在此时崩溃，但通常是稍后，所以我会继续...

然后我单击一个标题为“生成”的按钮，该按钮创建一个 URL 加载 ASP.Net 超链接及其创建的 URL 的文本，然后通过 javascript 将其背景颜色设置为黄色以通过此淡出...

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

我最初是通过这个代码在后面的代码中设置颜色...

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

但后来我想也许背景颜色被设置为 jquery 颜色插件无法识别的东西，或者因为它被设置在服务器端，插件无法访问它的样式或其他东西，但改变了它仍然对修复错误没有任何影响。

最后， generate 将 URL 的背景颜色从白色更改为黄色，然后正如我所说的，大多数情况下它会很好地消失，但很少会引发错误“无效的属性值”。

据我所知，我的语法正是使用彩色动画的方式。我觉得我使用更新面板的事实可能会在这里造成严重破坏，但我不确定。

有没有人对可能导致这种事情的原因有任何见解？尝试调试确实是一团糟，因为它很少发生，而忽略了javascript已经很难调试的事实。

在 Windows Vista 上使用 jquery 1.3.1 和 jquery.color 1.0。使用 Visual Studio 2008。如果有什么我可以解决的，请告诉我。

编辑：该死，还没有一个回应。我在这方面工作了一段时间，但我刚刚在我的应用程序的另一部分发现了这个错误，我正在做黄色渐变。这两个页面都使用更新面板。在很多情况下，我不喜欢更新面板，它肯定对我的 jquery 造成了严重破坏。我想知道这是否与此有关。哦，这有点暗示整个 Vista 的事情，但我会指出我在 IIS7 上运行。

这会激发任何见解吗？

【参考方案1】：

我想我在另一个项目中遇到了和你一样的问题；我在另一个 DIV 中有一个 DIV（没有明确定义它的背景。）我试图“闪烁”内部 DIV 的背景颜色并遇到该错误。只有在我为容器 DIV 分配了特定颜色后，错误才消失。

【讨论】：

伙计，我想就是这样！我将暂缓给你答案，但我有同样的情况（没有背景颜色的祖父母 div）。我已经测试了一堆，错误尚未返回。

我讨厌这样不可预测的事实——它似乎奏效了，至少目前是这样。

我应该添加这个似乎只是帮助我的问题，但最终并没有消除它。 jQuery中有一个错误，请参阅下面的回复。

【参考方案2】：

我在 IE8 中遇到了同样的问题，在某些 td 元素上具有背景色动画。即使我为 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

【讨论】：

设置父背景颜色对我不起作用。但这个解决方案做到了。

+1，完美的解释 + Trac 票的链接，我可以自信地解决我的问题而不是巫毒 :) 顺便说一句 - 你可以使用他们的最终修复而不是这个代码：github.com/jquery/jquery-ui/commit/…跨度>

【参考方案3】：

对于那些对jQuery color plugin 有这个问题的人来说，一个足够好的技巧就是改变

if ( fx.state == 0 ) 

到像这样的低级

if ( fx.state <= 0.045 ) 

奇怪的是 fx.state 并不总是 0，这就是偶尔抛出无效属性错误的原因。

【讨论】：

-1：错误是由在初始化运行之前 fx.state 可能大于 0 的竞争条件引起的。接受更大的值会减少竞争条件的窗口，但会导致不必要的重新计算并且竞争条件仍然存在（如果由于某种原因延迟变得更长）。请参阅 Lance Fisher 的回答和dev.jqueryui.com/ticket/4251上的 cmets

【参考方案4】：

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;

这完全解决了我的问题。

【参考方案5】：

我重写了颜色设置器函数，以防止 NaN 传播到 RGB 值中，这样就解决了问题。

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;

【参考方案6】：

jquery.color.js 也有类似的问题。通过使用jquery.effects.core.js（jquery ui effects core）解决了这个问题。

我希望它也对你有用。

【参考方案7】：

我有另一个解决方案，它对我有用。只需添加这些验证行：

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

【参考方案8】：

如果您尝试在某些浏览器中为某些元素设置动画，这似乎不起作用（在 Firefox 中有效，在 Google Chrome 中无效）。例如，这不适用于 HTML 画布。 fx.start 将是未定义的。

我的 'hack' 让它与 HTML Canvas 元素一起工作 -

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