Question

I have a simple notification system. I want to use jquery to highlight the div onload by changing the background color and go back to normal after 500ms just a flash. Similar to when we answer questions on Stackoverflow. Simple enough to grab attention.

<div id="flash">Notification</div> 

 $(function() {
    $( "#flash" ).animate({
    backgroundColor: "#aa0000",
     }, 1000 );
 });

It does not work as expected. It does not switch back to #ffffff.

I appreciate any help.

Answer 1

jQuery UI has a specific effect for this called highlight. The issues of using animate on properties like background-color are described here:

All
animated properties should be animated
to a single numeric value, except as
noted below; most properties that are
non-numeric cannot be animated using
basic jQuery functionality. (For
example, width, height, or left can be
animated but background-color cannot
be.) Property values are treated as a
number of pixels unless otherwise
specified. The units em and % can be
specified where applicable.

Edit if you really don’t want to go with the jQuery UI option, you could simulate a similar effect by wrapping the background-color into its own element and hiding that out.

example: http://jsfiddle.net/niklasvh/x2jrU/