Categories
colors javascript jquery jquery-animate

jQuery animate backgroundColor

335

I am trying to animate a change in backgroundColor using jQuery on mouseover.

I have checked some example and I seem to have it right, it works with other properties like fontSize, but with backgroundColor I get and “Invalid Property” js error.
The element I am working with is a div.

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

Any ideas?

3

  • For jquery 1.4.2 with jquery effect 1.8 I have to admit that Andrew solution work perfect. See his post below.

    Mar 22, 2010 at 16:50

  • 1

    Note: this plugin is detecting the current background color of the element – Chrome browser returns rgba(0, 0, 0, 0) instead of the expected empty/null value when there is no background color defined. To “fix” this, the element must have initial background color.

    Dec 30, 2010 at 11:23

  • The linked page seems broken (at least the project page and demo page).

    May 2, 2011 at 5:26

336

The color plugin is only 4kb so much cheaper than the UI library. Of course you’ll want to use a decent version of the plugin and not some buggy old thing which doesn’t handle Safari and crashes when the transitions are too fast. Since a minified version isn’t supplied you might like test various compressors and make your own min version. YUI gets the best compression in this case needing only 2317 bytes and since it is so small – here it is:

(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);

13

  • 2

    Alright, go to the link Andrew propose. Download the file. You need to add it to your project. You can still have jquery.effects.core in your project this will work perfectly. Thank you for the answer. +1

    Mar 22, 2010 at 16:49

  • 3

    I simply pasted the above into my existing ‘jquery-ui-1.8.2.min.js’ file and… everything still worked 🙂

    Feb 4, 2011 at 11:55

  • 7

    I would like to note, in the last year (2011) the author of this plugin released a version 2 which has a lot of nice features in it, but aren’t required for the basic functionality this lib is usually sought after for. It’s now 20+kb big. You can select the v1 branch to get the old version (Which still works) but is much lighter weight.

    – Aren

    Jun 10, 2011 at 22:48

  • 6

    FWIW – you can remove the color-to-rgb mappings in the code and reduce the size further: raw.github.com/gist/1891361/… . The downside is that you cannot use color names for animation. You will have to use rgb values.

    – Niyaz

    Feb 23, 2012 at 7:44


  • 4

    jQuery 1.8 breaks this plug in btw. curCSS isn’t in jQuery any more.

    Sep 14, 2012 at 14:27

72

I had the same problem and fixed it by including jQuery UI. Here is the complete script :

<!-- 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>

0

    66

    Do it with CSS3-Transitions. Support is great (all modern browsers, even IE). With Compass and SASS this is quickly done:

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

    Pure CSS:

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

    I’ve wrote an german article about this topic: http://www.solife.cc/blog/animation-farben-css3-transition.html

    1