JQuery background color animate not working

Question

I want to change the background color of 'exampleDiv' from the original white background to when I call the code below to immediate change the background yellow and then fade back to the original white background.

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");

However, this code does not work.

I have only the JQuery core and JQuery UI linked to my web page.

Why doesn't the code above work?

Answer 1

I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases.

Try this function:

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || "fast"; // edit is here
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; // default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

and call it like so:

$('#exampleDiv').animateHighlight();

Tested in IE9, FF4, and Chrome, using jQuery 1.5 (do NOT need UI plugin for this). I didn't use the jQuery color plugin either - you would only need that if you want to use named colors (e.g. 'yellow' instead of '#FFFF9C').

Answer 2

I had the same problem and I was able to get everything to work when I included the correct js files.

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>

I took it a step further and found a nice extension someone wrote.

jQuery.fn.flash = function (color, duration) {
   var current = this.css('backgroundColor');
   this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
   .animate({ backgroundColor: current }, duration / 2);
}

The above code allows me to do the following:

$('#someId').flash('255,148,148', 1100);

That code will get your element to flash to red then back to its original color.

Here's some sample code. http://jsbin.com/iqasaz/2

Answer 3

I believe you also need JQuery Color Animations.

Answer 4

The jQuery UI has a highlight effect that does exactly what you want.

   $("exampleDiv").effect("highlight", {}, 5000);

You do have some options like changing the highlight colour.

Answer 5

Animating the backgroundColor is not supported in jQuery 1.3.2 (or earlier). Only parameters that take numeric values are supported. See the documentation on the method. The color animations plugin adds the ability to do this as of jQuery 1.2.

Answer 6

I came across the same issue and ultimately it turned out to be multiple call of jquery's js file on the page.

While this works absolutely fine with any other methods and also with animate when tried with other css properties like left, but it doesn't work for background color property in animate method.

Hence, I removed the additional call of jquery's js file and it worked absolutely fine for me.

Answer 7

For me, it worked fine with effects.core.js. However, I don't recall whether that's really required. I think that it only works with hexadecimal values. Here's a sample hover code that makes things fade as you hover. Thought it might be useful:

jQuery.fn.fadeOnHover = function(fadeColor)
{
    this.each(function()
    {
        jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
        jQuery(this).hover(
            function()
            {
                //Fade to the new color
                jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
            }, 
            function()
            {
                //Fade back to original color
                original = jQuery(this).data("OrigBg");
                jQuery(this).stop().animate({backgroundColor:original},1000) 
            }
        );
    });
}
$(".nav a").fadeOnHover("#FFFF00");

Answer 8

I had to use the color.js file to get this to work. I'm using jquery 1.4.2.

Get the color.js here

Answer 9

Just added this snippet below jquery script and it immediately started working:

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

Source