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

Solution 1:

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/

Solution 2:

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

Solution 3:

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