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