根据 class 淡入 body 颜色

Question

尝试在类似于此网站的滑块中设置背景动画 - http://www.legworkstudio.com/

我正在使用一个名为 fullpage.js 的插件，它根据选择的幻灯片（从 0 开始）向 body 添加 class "fp-viewing-#"。

我似乎无法弄清楚为什么下面的行不起作用。我已经尝试了 .animate + .css 来做到这一点。

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

Answer 1

只需在 body 元素上使用过渡

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>

根据 class 淡入 body 颜色

Fade in body colour depending on class

css

jquery

slider

fullpage.js