JQuery help - animate background color

Question

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

Answer 1

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!

Answer 2

You need the color plugin to animate between colors.

See a previous SO q & a

Answer 3

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.

Answer 4

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.

Answer 5

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