jQuery анимированный backgroundColor


327

Я пытаюсь анимировать изменение в backgroundColor с помощью jQuery при наведении курсора.

Я проверил некоторый пример, и я, кажется, правильно, он работает с другими свойствами, такими как fontSize, но с backgroundColor я получаю и "Invalid Property" js error. Элемент, с которым я работаю - это div.

$(".usercontent").mouseover(function() {
    $(this).animate({ backgroundColor: "olive" }, "slow");
});

Любые идеи?


Для jquery 1.4.2 с эффектом jquery 1.8 я должен признать, что решение Andrew работает идеально. Смотрите его пост ниже.
Патрик Дежарден

1
Примечание: этот плагин определяет текущий цвет фона элемента - браузер Chrome возвращает rgba(0, 0, 0, 0)вместо ожидаемого пустого / нулевого значения, если не задан цвет фона. Чтобы это исправить, элемент должен иметь исходный цвет фона.
Мастер теней - это ухо для тебя

Связанная страница кажется сломанной (по крайней мере, страница проекта и демонстрационная страница).
Паоло Стефан

Ответы:


333

Цветовой плагин всего на 4 Кбайт намного дешевле, чем библиотека пользовательского интерфейса. Конечно, вы захотите использовать достойную версию плагина, а не какую-нибудь глючную старую штуку, которая не обрабатывает Safari и вылетает, когда переходы слишком быстрые. Поскольку минимизированная версия не поставляется, вы можете протестировать различные компрессоры и создать свою собственную минимальную версию. YUI получает лучшее сжатие в этом случае, требующее всего 2317 байт, и, поскольку оно настолько мало, вот оно:

(function (d) {
    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
        d.fx.step[e] = function (g) {
            if (!g.colorInit) {
                g.start = c(g.elem, e);
                g.end = b(g.end);
                g.colorInit = true
            }
            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
        }
    });

    function b(f) {
        var e;
        if (f && f.constructor == Array && f.length == 3) {
            return f
        }
        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
        }
        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
        }
        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
        }
        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
        }
        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
            return a.transparent
        }
        return a[d.trim(f).toLowerCase()]
    }
    function c(g, e) {
        var f;
        do {
            f = d.css(g, e);
            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
                break
            }
            e = "backgroundColor"
        } while (g = g.parentNode);
        return b(f)
    }
    var a = {
        aqua: [0, 255, 255],
        azure: [240, 255, 255],
        beige: [245, 245, 220],
        black: [0, 0, 0],
        blue: [0, 0, 255],
        brown: [165, 42, 42],
        cyan: [0, 255, 255],
        darkblue: [0, 0, 139],
        darkcyan: [0, 139, 139],
        darkgrey: [169, 169, 169],
        darkgreen: [0, 100, 0],
        darkkhaki: [189, 183, 107],
        darkmagenta: [139, 0, 139],
        darkolivegreen: [85, 107, 47],
        darkorange: [255, 140, 0],
        darkorchid: [153, 50, 204],
        darkred: [139, 0, 0],
        darksalmon: [233, 150, 122],
        darkviolet: [148, 0, 211],
        fuchsia: [255, 0, 255],
        gold: [255, 215, 0],
        green: [0, 128, 0],
        indigo: [75, 0, 130],
        khaki: [240, 230, 140],
        lightblue: [173, 216, 230],
        lightcyan: [224, 255, 255],
        lightgreen: [144, 238, 144],
        lightgrey: [211, 211, 211],
        lightpink: [255, 182, 193],
        lightyellow: [255, 255, 224],
        lime: [0, 255, 0],
        magenta: [255, 0, 255],
        maroon: [128, 0, 0],
        navy: [0, 0, 128],
        olive: [128, 128, 0],
        orange: [255, 165, 0],
        pink: [255, 192, 203],
        purple: [128, 0, 128],
        violet: [128, 0, 128],
        red: [255, 0, 0],
        silver: [192, 192, 192],
        white: [255, 255, 255],
        yellow: [255, 255, 0],
        transparent: [255, 255, 255]
    }
})(jQuery);

2
Хорошо, перейдите по ссылке, которую предлагает Андрей. Загрузите файл. Вы должны добавить его в свой проект. У вас все еще может быть jquery.effects.core в вашем проекте, это будет отлично работать. Спасибо за ответ. +1
Патрик Дежарден

3
Я просто вставил вышеупомянутое в мой существующий файл 'jquery-ui-1.8.2.min.js' и ... все по-прежнему работало :-)
Дейв Эверитт

7
Я хотел бы отметить, что в прошлом году (2011) автор этого плагина выпустил версию 2, в которой есть много приятных функций, но они не требуются для базовой функциональности, для которой обычно требуется эта библиотека. Сейчас 20 + кб большой. Вы можете выбрать v1ветку, чтобы получить старую версию (которая все еще работает), но гораздо легче.
Арен

6
FWIW - вы можете удалить в коде преобразования color-to-rgb и еще больше уменьшить его размер: raw.github.com/gist/1891361/… . Недостатком является то, что вы не можете использовать названия цветов для анимации. Вам придется использовать значения RGB.
Нияз

4
JQuery 1.8 ломает этот плагин между прочим. curCSS больше не в jQuery.
Рич Брэдшоу

68

У меня была та же проблема, и я исправил ее, включив jQuery UI. Вот полный сценарий:

<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>


<script type="text/javascript">
$(document).ready(function() {
$('#menu ul li.item').hover(
    function() {
        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
    });
});
</script>

61

Сделайте это с помощью CSS3-переходов. Поддержка отличная (все современные браузеры, даже IE). С помощью Compass и SASS это быстро делается:

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

Чистый CSS:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

Я написал немецкую статью на эту тему: http://www.solife.cc/blog/animation-farben-css3-transition.html


6
Поиграйте с переходами при наведении и клике по адресу: jsfiddle.net/K5Qyx
Дем Пилафян

30

Bitstorm имеет лучший плагин jquery color animation, который я когда-либо видел Это улучшение цветового проекта jquery. Он также поддерживает RGBA.

http://www.bitstorm.org/jquery/color-animation/


1
Я не могу отблагодарить вас за то, что вы заявили, что он поддерживает 'rgba', именно то, что я искал
Онимуша

13

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

/******************************************************************************/
/****************************** COLOR ANIMATIONS ******************************/
/******************************************************************************/

// override the animation for color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
    'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (!fx.colorInit) {
            fx.start = getColor(fx.elem, attr);
            fx.end = getRGB(fx.end);
            fx.colorInit = true;
        }

        fx.elem.style[attr] = 'rgb(' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
        var result;

        // Check if we're already dealing with an array of colors
        if ( color && color.constructor == Array && color.length == 3 )
                return color;

        // Look for rgb(num,num,num)
        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

        // Look for rgb(num%,num%,num%)
        if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

        // Look for #a0b1c2
        if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

        // Look for #fff
        if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
        if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
                return colors['transparent'];

        // Otherwise, we're most likely dealing with a named color
        return colors[$.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
        var color;

        do {
                color = $.curCSS(elem, attr);

                // Keep going until we find an element that has color, or we hit the body
                if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
                        break;

                attr = "backgroundColor";
        } while ( elem = elem.parentNode );

        return getRGB(color);
};

Это всего 1.43kb после сжатия с YUI:

$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c){if(!c.colorInit){c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if(b&&b.constructor==Array&&b.length==3){return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b)){return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};

Вы также можете анимировать цвета, используя CSS3 переходы, но это поддерживается только современными браузерами.

a.test {
  color: red;
  -moz-transition-property: color;  /* FF4+ */
  -moz-transition-duration: 1s;
  -webkit-transition-property: color;  /* Saf3.2+, Chrome */
  -webkit-transition-duration: 1s;
  -o-transition-property: color;  /* Opera 10.5+ */
  -o-transition-duration: 1s;
  -ms-transition-property: color;  /* IE10? */
  -ms-transition-duration: 1s;
  transition-property: color;  /* Standard */
  transition-duration: 1s;
  }

  a.test:hover {
  color: blue;
  }

Использование сокращенного свойства:

/* shorthand notation for transition properties */
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */

a.test {
  color: red;
  -moz-transition: color 1s;
  -webkit-transition: color 1s;
  -o-transition: color 1s;
  -ms-transition: color 1s;
  transition: color 1s;
  }

a.test {
  color: blue;
 }

В отличие от обычных переходов javascript, переходы CSS3 аппаратно ускоряются и, следовательно, более плавные. Вы можете использовать Modernizr, чтобы узнать, поддерживает ли браузер переходы CSS3, если нет, то вы можете использовать jQuery в качестве запасного варианта:

if ( !cssTransitions() ) {
    $(document).ready(function(){
        $(".test").hover(function () {
                $(this).stop().animate({ backgroundColor: "red" },500)
             }, function() {
                 $(this).stop().animate({ backgroundColor: "blue" },500)}    
             );
    }); 
}

Не забудьте использовать stop (), чтобы остановить текущую анимацию перед запуском новой, в противном случае, если вы слишком быстро пропустите элемент, эффект будет мигать некоторое время.


11

Для тех, кто нашел это. Вам лучше использовать версию jQuery UI, потому что она работает во всех браузерах. Плагин цвета имеет проблемы с Safari и Chrome. Это работает только иногда.


6
-1 Последняя версия цветового плагина отлично работает в Chrome.
Андрей

3
Тяжело включать дополнительный скрипт, чтобы просто оживить фон
oneiros

11

Вы можете использовать 2 деления:

Вы можете поместить клона поверх него и затемнить оригинал, одновременно добавляя клон.

Когда затухание закончено, восстановите оригинал с новым bg.

$(function(){
    var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset();

      // Create clone w other bg and position it on original
    $elie.toggleClass("class1, class2").appendTo("body")
         .offset({top: os.top, left: os.left}).hide();

    $mytd.mouseover(function() {            
          // Fade original
        $mytd.fadeOut(3000, function() {
            $mytd.toggleClass("class1, class2").show();
            $elie.toggleClass("class1, class2").hide();            
        });
          // Show clone at same time
        $elie.fadeIn(3000);
    });
});​

Пример jsFiddle


.toggleClass()
.offset()
.fadeIn()
.fadeOut()


может быть, это сработало в какой-то момент, по крайней мере, верно, не кажется, что он делает то, что от него ожидают.
epeleg

@epeleg - Работает в Mac Chrome для меня. Вы нажимаете на цветной прямоугольник, и он меняет цвет (2013 - 07 - 15)
Питер Айтай

Я не знаю, как, но на самом деле сейчас он работает на моем Windows7 Chrome. может быть связано с обновлением Chrome, которое я сделал вчера? во всяком случае, как я уже сказал, это действительно работает сейчас.
Epeleg

8

Я использовал комбинацию CSS-переходов с JQuery для желаемого эффекта; Очевидно, что браузеры, которые не поддерживают переходы CSS, не будут анимироваться, но его облегченная опция, которая хорошо работает для большинства браузеров и для моих требований, является приемлемым ухудшением.

Jquery для изменения цвета фона:

   $('.mylinkholder a').hover(
        function () {
            $(this).css({ backgroundColor: '#f0f0f0' }); 
        },
        function () {
            $(this).css({ backgroundColor: '#fff' });
        }
    );

CSS с использованием перехода к исчезновению изменения цвета фона

   .mylinkholder a
   {
   transition: background-color .5s ease-in-out;
   -moz-transition: background-color .5s ease-in-out;
   -webkit-transition: background-color .5s ease-in-out; 
  -o-transition: background-color .5s ease-in-out; 
   }

6

В настоящее время плагин цвета jQuery поддерживает следующие именованные цвета:

aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]

1
Не могли бы вы процитировать источник. Спасибо за листинг, кстати.
Шрикант Шарат

Этот список
взят

2
-1 Ваш список цветов относится к устаревшей версии. Текущая версия имеет по крайней мере один дополнительный цвет, который я заметил.
Андрей

5

Мне нравится использовать delay (), чтобы сделать это, вот пример:

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

Это может быть вызвано функцией, где "element" - это элемент class / name / etc. Элемент мгновенно появится с фоном # FCFCD8, удерживайте в течение секунды, а затем исчезнет в #EFEAEA.


4

Просто добавьте следующий фрагмент ниже вашего скрипта jquery и наслаждайтесь:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Смотри пример

Ссылка для получения дополнительной информации


Пожалуйста, приведите примеры, чтобы они не были подвержены ссылочной гнили.
Эге Озкан

2

Я наткнулся на эту страницу с той же проблемой, но со следующими проблемами:

  1. Я не могу включить дополнительный файл плагина jQuery с моей текущей настройкой.
  2. Мне неудобно вставлять большие блоки кода, которые я не успеваю перечитать и проверить.
  3. У меня нет доступа к CSS.
  4. У меня почти не было времени на реализацию (это было только визуальное улучшение страницы администратора)

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

element
  .css('color','#FF0000')
;
$('<div />')
  .css('width',0)
  .animate(
    {'width':100},
    {
      duration: 3000,
      step:function(now){
        var v = (255 - 255/100 * now).toString(16);
        v = (v.length < 2 ? '0' : '') + v.substr(0,2);
        element.css('color','#'+v+'0000');
      }
    }
  )
;

Выше создается временный div, который никогда не помещается в поток документов. Затем я использую встроенную анимацию jQuery для анимации числового свойства этого элемента - в данном случае width- которое может представлять процент (от 0 до 100). Затем, используя функцию шага, я переношу эту числовую анимацию в цвет текста с простой шестнадцатеричной окантовкой.

То же самое можно было бы достичь с помощью setInterval, но с помощью этого метода вы можете извлечь выгоду из методов анимации jQuery - например .stop()- и вы можете использовать easingи duration.

Очевидно, что он используется только для простых затуханий цветов, для более сложных преобразований цветов вам нужно будет использовать один из приведенных выше ответов - или написать свою собственную математику затухания цветов :)


2

Попробуй это:

(function($) {  

            var i = 0;  

            var someBackground = $(".someBackground");  
            var someColors = [ "yellow", "red", "blue", "pink" ];  


            someBackground.css('backgroundColor', someColors[0]);  

            window.setInterval(function() {  
                i = i == someColors.length ? 0 : i;  
                someBackground.animate({backgroundColor: someColors[i]}, 3000);  
                i++;  
            }, 30);  

})(jQuery);  

Вы можете просмотреть пример здесь: http://jquerydemo.com/demo/jquery-animate-background-color.aspx



1

Если вы не хотите анимировать свой фон, используя только основные функции jQuery, попробуйте это:

jQuery(".usercontent").mouseover(function() {
      jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() {
            jQuery(this).animate({
                backgroundColor: 'white'
            }, 'normal', 'linear', function() {
                jQuery(this).css({'background':'none', backgroundColor : ''});
            });
        });

0

Попробуйте использовать это

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;

0

Попробуй это:

jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

Пересмотренный способ с эффектами:

jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.