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 f

Answer 1

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 2

I believe you also need JQuery Color Animations.

Answer 3

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 4

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 5

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 6

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.