jquery 색상 애니메이션이 간헐적으로 잘못된 속성 값을 발생시킵니다.

StackOverflow https://stackoverflow.com/questions/530866

문제

업데이트 패널 새로 고침 시 노란색 페이드를 수행하기 위해 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을 생성하는 "생성"이라는 제목의 버튼을 클릭하면 생성된 URL에 대한 텍스트가 포함된 ASP.Net 하이퍼링크가 로드되고 자바스크립트를 통해 배경색이 노란색으로 설정됩니다.

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

처음에는 이 코드를 통해 뒤에 있는 코드의 색상을 설정했습니다.

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

그러나 나는 아마도 뒷면 색상이 jquery 색상 플러그인이 인식할 수 없는 것으로 설정되었거나 서버 측에 설정되었기 때문에 플러그인이 스타일이나 다른 것에 액세스할 수 없었지만 변경해도 여전히 아무 것도 없다고 생각했습니다. 버그 수정에 대한 효과.

마지막으로 생성은 URL의 배경 색상을 흰색에서 노란색으로 변경한 다음 제가 말했듯이 대부분의 경우에는 괜찮아지지만 "잘못된 속성 값" 오류가 발생하는 경우는 거의 없습니다.

내가 알 수 있는 한 내 구문은 컬러 애니메이션을 사용하는 데 필요한 방식일 뿐입니다.업데이트 패널을 사용하고 있다는 사실이 여기서 큰 혼란을 가져올 수 있다고 생각하지만 확실하지 않습니다.

누가 그런 일을 일으킬 수 있는지에 대한 통찰력을 가지고 있습니까?자바스크립트가 이미 디버깅하기 어렵다는 사실을 무시하는 경우가 너무 드물기 때문에 디버깅을 시도하는 것은 정말 엉망이었습니다.

Windows Vista에서 jquery 1.3.1 및 jquery.color 1.0을 사용합니다.비주얼 스튜디오 2008을 사용합니다.제가 정리할 수 있는 부분이 있으면 알려주세요.

편집하다: 댕, 아직 답변이 하나도 없군요.이 작업을 잠시 중단했지만 노란색 페이드를 수행하고 있는 앱의 다른 부분에서 버그를 발견했습니다.이 두 페이지 모두 업데이트 패널을 사용합니다.나는 많은 경우에 업데이트 패널의 팬이 아니며 그것은 확실히 내 jquery에 큰 피해를 입혔습니다.혹시 이것과 관련이 있는지 궁금합니다.아, 이것은 Vista 전체에 대해 암시된 내용이지만 저는 IIS7에서 실행하고 있다는 점을 지적하겠습니다.

이것이 통찰력을 불러일으키나요?

도움이 되었습니까?

해결책

나는 다른 프로젝트에서 당신과 같은 문제에 직면했다고 생각합니다.다른 DIV(배경이 명시적으로 정의되지 않은) 내부에 DIV가 있습니다. 내부 DIV의 배경색을 "플래시"하려고 하다가 해당 오류가 발생했습니다.컨테이너 DIV에 특정 색상을 할당한 후에야 오류가 사라졌습니다.

다른 팁

나는 일부 TD elemtents에 대한 배경색 애니메이션으로 IE8에서 같은 문제를 겪고있었습니다. 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

이 문제가있는 사람들을 위해 jQuery 컬러 플러그인, 충분히 좋은 해킹은 변경하는 것입니다 

if ( fx.state == 0 ) {

낮은 곳으로

if ( fx.state <= 0.045 ) {

이상하게도 충분한 fx.state가 항상 0이 아니기 때문에 유효하지 않은 속성 오류가 때때로 던져집니다.

jQuery 사이트의 수정은 다음과 같습니다 (향후 릴리스에 있어야 함). 사실상 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;
}

이것은 나에게 문제를 완전히 정리했습니다.

NANS가 RGB 값으로 전파되는 것을 방지하기 위해 Color Setter 기능을 다시 작성하여 문제를 해결합니다.

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

나는 비슷한 문제를 겪고 있었다 jquery.color.js. 사용하여 이것을 해결했습니다 jquery.effects.core.js (jQuery UI 효과 코어).

나는 그것이 당신에게도 효과가 있기를 바랍니다.

또 다른 해결책이 있습니다. 저에게 효과적입니다. 이 유효성 검사 라인을 추가하기 만하면됩니다.

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

특정 브라우저에서 일부 요소를 애니메이션하려고하는 경우 (크롬이 아닌 Firefox에서 작동 함) 이것은 작동하지 않는 것 같습니다. 예를 들어, 이것은 HTML 캔버스에서는 작동하지 않습니다. fx.start는 정의되지 않습니다.

예를 들어 HTML 캔버스 요소와 함께 작동하는 '해킹' -

if (fx.start == undefined) { fx.start = getRGB('white'); }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top