How do you fade in/out a background color using jquery?

Question

Hi,

You know how some sites fade in /out color on a error message, how can you dothat with jquery?

The point is to draw attention to the user about the message.

Answer 1

you can start here:

http://docs.jquery.com/Effects/fadeIn
http://docs.jquery.com/Effects/fadeOut

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

Answer 2

If you want to specifically animate the background color of an element, I believe you need to include jQueryUI framework. Then you can do:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI has some built-in effects that may be useful to you as well.

http://jqueryui.com/demos/effect/

Answer 3

This exact functionality (3 second glow to highlight a message) is implemented in the jQuery UI as the highlight effect

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

Color and duration are variable

Answer 4

Usually you can use the .animate() method to manipulate arbitrary CSS properties, but for background colors you need to use the color plugin. Once you include this plugin, you can use something like others have indicated $('div').animate({background-color: #f00}) to change the color.

As others have written, some of this can be done using the jQuery UI library as well.