How to use animate background of an element in single color

Question

I am working on this demo. Is it possible to change the background color of an element using jQuery animate?

$('#change').on('click', function () {
    $('body').animate({background:'rgba(0,0,0,0.4)'}, 300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change">Change BG</button>

Possible duplicate of [jQuery animate backgroundColor](https://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Mohammad, Nov 09 '18 at 18:10

score 1 · Accepted Answer · answered Nov 09 '18 at 18:13

Can I offer an alternative? There are lots of jQuery plugins that do this sort of thing but it is massive overkill for what you are doing.

Background, and more specifically background-color is animatable with CSS, so I'd recommend using a transition property like this:

HTML:

$("#change").click(function(){
  $("body").addClass("green");
})

CSS:

body{
  transition: background 1s;
}

body.green{
  background:green;
}

1 Answers1