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

时间:2009-02-10 02:11:10

标签: asp.net jquery updatepanel colors jquery-animate

我正在尝试为ASP.Net超链接设置背景动画,以便在更新面板刷新时执行黄色淡入淡出。到目前为止,它几乎在所有时间都有效,但偶尔会出现javascript错误“无效的Propery值”。并调试到此行的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颜色插件无法识别的东西,或者因为它是设置服务器端插件无法访问它的样式或其他东西,但更改它仍然没有影响修复bug。

最后,生成将URL的背面颜色从白色更改为黄色,然后正如我所说,大部分时间它都会消失,但很少会抛出错误“无效的属性值”。

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

有没有人对什么可能导致这样的事情有任何见解?这是一个真正的混乱尝试调试,因为它很少发生无视javascript已经很难调试的事实。

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

编辑: Dang,还没有一个回复。我已经花了一些时间来处理这个问题,但我刚刚在我的应用程序的另一部分找到了我正在进行黄色淡入淡出的错误。这两个页面都使用更新面板。在许多情况下,我不是更新面板的粉丝,它肯定会对我的jquery造成严重破坏。我想知道它是否与此有关。哦,这有点暗示整个Vista的事情,但我会指出我在IIS7上运行。

这会引起任何见解吗?

8 个答案:

答案 0 :(得分:7)

我想我在另一个项目上遇到了和你一样的问题;我在另一个DIV里面有一个DIV(没有明确定义它的背景。)我试图“闪现”内部DIV的背景颜色并且遇到了这个错误。只有在我为容器DIV指定了特定颜色后,错误才会消失。

答案 1 :(得分:7)

我在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

答案 2 :(得分:2)

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

if ( fx.state == 0 ) {

到像

那样低的东西
if ( fx.state <= 0.045 ) {

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

答案 3 :(得分:2)

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

这完全解决了我的问题。

答案 4 :(得分:1)

答案 5 :(得分:1)

我有另一个解决方案,它对我有用。只需添加以下验证行:

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

答案 6 :(得分:1)

我遇到与jquery.color.js类似的问题。通过使用jquery.effects.core.js(jquery ui effects core)解决了这个问题。

我希望它也适合你。

答案 7 :(得分:0)

如果您尝试动画某些浏览器中的某些元素(在Firefox中运行,而不是在Google Chrome中运行),这似乎不起作用。例如,这不适用于HTML Canvas。 fx.start将是未定义的。

我'hack'让它与HTML Canvas元素一起使用 - 例如

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