Цветовая анимация jquery периодически создает неверное значение свойства - PullRequest
10 голосов
/ 10 февраля 2009

Я пытаюсь анимировать фон для гиперссылки ASP.Net, чтобы сделать желтое замирание при обновлении панелей обновления. Пока это работает почти все время, но иногда выдается ошибка 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(",") + ")";

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

Во-первых, окно загружается в 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 не мог распознать, или, поскольку он был установлен на стороне сервера, плагин не мог получить доступ к его стилю или чему-то другому, кроме изменения его по-прежнему не влиял на исправление ошибки.

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

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

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

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

РЕДАКТИРОВАТЬ: Черт, еще ни одного ответа. Я немного отошел от работы над этим, но я только что нашел ошибку в другой части моего приложения, где я делаю желтое затухание. Обе эти страницы используют панель обновления. Я не фанат панели обновлений во многих случаях, и это определенно нанесло ущерб моему jquery. Мне интересно, имеет ли это какое-то отношение к этому. О, это как бы подразумевалось во всей Vista, но я укажу, что я работаю на IIS7.

Это вызывает какие-то идеи?

Ответы [ 8 ]

7 голосов
/ 17 апреля 2009

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

7 голосов
/ 12 февраля 2009

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

2 голосов
/ 30 декабря 2009

Исправление на сайте jQuery приведено ниже (должно быть в будущем выпуске). В Effect.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;
}

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

2 голосов
/ 28 августа 2009

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

if ( fx.state == 0 ) {

к чему-то низкому, как

if ( fx.state <= 0.045 ) {

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

1 голос
/ 14 декабря 2010

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

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

1 голос
/ 06 сентября 2010

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

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(",") + ")";
1 голос
/ 24 июля 2010

Я переписал функцию установки цвета, чтобы предотвратить распространение 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;
}
0 голосов
/ 12 июля 2010

Это не работает, если вы пытаетесь анимировать некоторые элементы в определенных браузерах (работает в Firefox, а не в Google Chrome). Например, это не будет работать с холстом HTML. fx.start будет неопределенным.

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

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