цветная анимация jquery периодически выдает недопустимое значение свойства

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

Вопрос

Я пытаюсь анимировать фон для ASP.Гиперссылка на сеть, чтобы сделать желтое затухание при обновлении панелей обновления.Пока это работает почти все время, но иногда выдается ошибка javascript "Недопустимое значение свойства". и он отлаживается в коде плагина jquery color для этой строки...

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

Вот порядок событий в том виде, в каком они происходят в данный момент...

Сначала окно загружается so в doc.ready, в нем регистрируется событие, которое будет выполнено, когда панель обновления завершит обновление следующим образом...

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

Где yellowFade определяется как...

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

Так вот, редко у меня случался сбой прямо на этом этапе, но обычно это происходит позже, так что я продолжу...

Затем я нажимаю кнопку под названием "Сгенерировать", которая создает URL, загружающий ASP.Сетевая гиперссылка с текстом для созданного ею URL-адреса, а затем с помощью javascript устанавливает цвет фона на желтый, который будет исчезать с помощью this...

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

Изначально у меня было это, устанавливая цвет в коде, лежащем в основе, с помощью этого кода...

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

Но потом я подумал, что, возможно, цвет задней панели был настроен на что-то, что плагин jquery color не смог распознать, или, поскольку он устанавливался на стороне сервера, плагин не мог получить доступ к его стилю или чему-то еще, но его изменение все равно не повлияло на исправление ошибки.

Наконец, generate изменяет обратный цвет URL-адреса с белого на желтый, затем, как я уже сказал, в большинстве случаев он просто исчезает, но редко выдает ошибку "Недопустимое значение свойства".

Насколько я могу судить, мой синтаксис именно такой, каким он должен быть для использования цветовой анимации.Мне кажется, что тот факт, что я использую updatepanel, может сеять здесь хаос, но я не уверен.

Есть ли у кого-нибудь какое-нибудь представление о том, что может вызвать подобное?Попытка отладки была настоящей неразберихой, поскольку это происходит так редко, игнорируя тот факт, что javascript уже является проблемой для отладки.

Используя jquery 1.3.1 и jquery.color 1.0 в Windows Vista.Используя Visual Studio 2008.Дайте мне знать, если есть что-нибудь, что я могу прояснить.

Редактировать: Черт возьми, пока ни одного ответа.Я взял небольшой перерыв в работе над этим, но я только что обнаружил ошибку в другой части моего приложения, где я делаю желтое затухание.На обеих этих страницах используется панель обновления.Я не являюсь поклонником панели обновления во многих случаях, и это определенно внесло хаос в мой jquery.Мне интересно, имеет ли это какое-то отношение к этому.О, это было отчасти подразумеваемо во всей этой истории с Vista, но я отмечу, что я работаю на IIS7.

Провоцирует ли это какие-либо озарения?

Это было полезно?

Решение

Я думаю, что столкнулся с той же проблемой, что и вы, в другом проекте;У меня был DIV внутри другого DIV (у которого явно не был определен фон.) Я пытался "прошить" цвет фона внутреннего DIV и столкнулся с этой ошибкой.Только после того, как я присвоил определенный цвет контейнеру DIV, ошибка исчезла.

Другие советы

У меня была такая же проблема в 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

Для тех, у кого возникла эта проблема с Цветной плагин jQuery, достаточно хороший взлом заключается в том , чтобы изменить 

if ( fx.state == 0 ) {

к чему-то низкому, вроде

if ( fx.state <= 0.045 ) {

Как ни странно, fx.state не всегда равно 0, поэтому иногда выдается ошибка недопустимого свойства.

Исправление на сайте 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;
}

Это полностью прояснило для меня проблему.

Я переписал функцию настройки цвета, чтобы предотвратить распространение NANS на значение 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;
}

У меня была похожая проблема с jquery.color.js.Решил эту проблему, используя jquery.effects.core.js (ядро эффектов пользовательского интерфейса jquery).

Я надеюсь, что это сработает и у вас.

У меня есть другое решение, оно работает для меня.Просто добавьте эти строки проверки:

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, а не в Google Chrome).Например, это не будет работать с HTML-холстом.fx.start будет неопределенным.

Мой "взлом", чтобы заставить его работать с элементами HTML Canvas, например -

if (fx.start == undefined) { fx.start = getRGB('white'); }
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top