Fade in body colour depending on class

Question

Trying to animate a background in a slider similar to this website - http://www.legworkstudio.com/

I'm using a plugin called fullpage.js which adds a class "fp-viewing-#" to the body depending on which slide is selected (starting at 0).

I can't seem to figure out why the lines below don't work. I've tried both .animate + .css to do this.

if ($("body").hasClass("fp-viewing-1")) {
    $("body").animate({"background" : "red"}, 2000);
}

Possible duplicate of [jQuery Animate() and BackgroundColor](http://stackoverflow.com/questions/16863640/jquery-animate-and-backgroundcolor). Also see [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — showdev, Nov 02 '15 at 20:52
`background` is not an animatable property: http://www.w3schools.com/jquery/eff_animate.asp — Victor Levin, Nov 02 '15 at 20:52

score 2 · Accepted Answer · answered Nov 02 '15 at 21:00

Just use transition on your body element

document.getElementsByTagName('button')[0].onclick = function() {
  document.body.className = 'red';
};

body {
  background-color: green;
  transition: background-color 2s;
  -webkit-transition: background-color 2s;
  -moz-transition: background-color 2s;
}

body.red {
  background-color: red;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button>Change color</button>
    </body>
</html>

Fade in body colour depending on class

1 Answers1