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 believe you also need JQuery Color Animations.

Answer 2

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 3

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 4

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