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

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/

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

I know that the question was how to do it with Jquery, but you can achieve the same affect with simple css and just a little jquery...

For example, you have a div with 'box' class, add the following css

.box {background-color: black;-webkit-transition: background 0.5s linear;-moz-transition: background 0.5s linear;-ms-transition: background 0.5s linear;-o-transition: background 0.5s linear;transition: background 0.5s linear;}

and then use AddClass function to add another class with different background color like 'box highlighted' or something like that with the following css:

.box.highlighted {  background-color: white;}

I am a beginner and maybe there are some disadvantages of this method but maybe it'll be helpful for somebody

Here's a codepen:https://codepen.io/anon/pen/baaLYB