jQuery Animate() and BackgroundColor

Question

I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.

function show_user(dnid) {
    /* dnid is HTML ID of a div. */
    if (! $(dnid).is(':visible')) {
        $(dnid).show()
    }
    $('html, body').animate({scrollTop: $(dnid).offset().top});
    $(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}

What's strange is that this alternate animation works:

$(dnid).animate({opacity: "toggle"}, 1200);

But it's not what I want at all.

Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.

The function above is called by this link <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

Could someone help me animate the background color?

=========

Thanks everyone for the help. Lots of similar answers. Here's what I ended up with

In my header

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

Then in my show_user function right after the scroll animation.

var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);

That gives a relatively quick red "pulse" that will draw the user's eyes.

Again, thanks for the help.

Answer 1

jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

Source

Answer 2

jQuery supports animation between any numeric CSS properties, which does not include colors. However, there are other libraries that make animating colors possible. One such library is the aptly-named jQuery Color. Its readme page shows several examples of how to use it to animate between colors using the jQuery .animate() function

Answer 3

Use the CSS animation property and keyframes

See it in action

HTML

<div></div>

CSS

div {
    background-color: red;
    height: 200px; width: 200px;
    -webkit-animation: pulse 1s ease-in 0 infinite normal both;
    -moz-animation: pulse 1s ease-in 0 infinite normal both;
    -o-animation: pulse 1s ease-in 0 infinite normal both;
    animation: pulse 1s ease-in 0 infinite normal both;
}

@-webkit-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-moz-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-ms-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-o-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}