JQuery цвет анимации бросает Неверное значение свойства с перерывами

Ответ 1

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

Ответ 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)

To:

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

Ответ 3

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

if ( fx.state == 0 ) {

для чего-то низкого, как

if ( fx.state <= 0.045 ) {

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

Ответ 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;
}

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

Ответ 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;
}

Ответ 6

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

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

Ответ 7

У меня была аналогичная проблема с jquery.color.js. Решено это с помощью jquery.effects.core.js (ядра jquery ui).

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

Ответ 8

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

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

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