How do I fade in text content with jQuery?
The point is to draw the user's attention to the message.
9 Answers
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.
This exact functionality (3 second glow to highlight a message) is implemented in the jQuery UI as the highlight effect
https://api.jqueryui.com/highlight-effect/
Color and duration are variable
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({backgroundColor: '#f00'}) to change the color.
As others have written, some of this can be done using the jQuery UI library as well.
Related