views:

346

answers:

4

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?

+2  A: 

I believe you also need JQuery Color Animations.

recursive
+2  A: 

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.

tvanfosson
Still the case in 1.4: http://api.jquery.com/animate/
D_N
+2  A: 

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.

Vincent Ramdhanie
This requires the Effects package. I'm looking for the most lightweight way for me to fade a background color within having to use a bunch of different library :(
AndyT
without* (not within)
AndyT
A: 

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