views:

2204

answers:

5

Hi

Using JQuery, what I want to do is create a function that when I call the function, it will fade the background color of my "#page" DIV from the CSS defined background color to yellow then back to the original CSS background color for #page.

Any ideas on how I can do this with JQuery?

I know JQuery has both an "animate" and "highlight" functionality. It appears "highlight" might be the appropriate option but I'm not certain.

Thanks

A: 

You could use the built-in jQuery function animate() with a callback to turn the div back to the original color. Or use the jQuery pulse plugin to do it automatically.

Hope that helps!

Al
+1  A: 

You need the color plugin to animate between colors.

See a previous SO q & a

redsquare
A: 

You may want to check out plugins such as this one to achieve what some call a "flash".

Unfortunately, searching for the term "jquery flash plugin" yields hundreds of results for SWF player plugins.

Soviut
+1  A: 
function flashColor(id)
{
    var container = $('#'+id);
    if(container.length)
    {
        var originalColor = container.css('backgroundColor');
        container.animate({
            backgroundColor:'yellow'
        },'normal','linear',function(){
            $(this).animate({
                backgroundColor:originalColor
        });
    }
}

untested. might contain syntax error.

Funky Dude
@Funky Dude, this looks promising. What minimum component do I need to download to have 'animate' capabilities? It's appears the base install of JQuery I have installed doesn't include 'animate'
By the way, http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations is exactly what I want to do but make it a callable function
nothing otherthan jquery itself
Funky Dude
jQuery's current docs (at http://api.jquery.com/animate/) say that you need jQueryUI if you want to animate colors.
Marius Gedminas
+3  A: 

Its pretty heavy to load the jquery UI just for this one feature, but if you are using it anyways, the effect you want is 'highlight'

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});
micmcg
@micmcg, how can I call the "highlight" method programmaticly - where as in your example, it's call on a mouse click.
just use the code inside the event handler. $("#page").effect("highlight", {}, 3000);
micmcg