Using jquery animate to highlight div on load

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/