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

Question

我正在尝试为 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 上运行。

这是否能激发一些见解？

Answer 1

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

Answer 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

Answer 3

对于那些使用 jQuery 颜色插件 遇到此问题的人来说，这已经足够好了hack 的方法是更改

if ( fx.state == 0 ) {

​​为较低的值，例如

if ( fx.state <= 0.045 ) {

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

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

这完全解决了我的问题。

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

Answer 6

我在 jquery.color.js 上遇到了类似的问题。 使用jquery.effects.core.js（jquery ui 效果核心）解决了这个问题。

我希望它也适合你。

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

Answer 8

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

例如，我的“黑客”让它与 HTML Canvas 元素一起使用 -

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