jquery - 如何使用 CSS 将背景颜色淡入淡出过渡到 Bootstrap 页面？

Question

我有页面 A，其中 bg-color 是 ex 的。 #fff。现在，当我单击链接并进入页面 B 时，背景颜色为

.body {background-color: #007F46;}

正如您可能猜到的那样，从白色到绿色的变化非常突然。有没有什么方法可以做一个过渡类的事情，当我的页面加载时，它会在持续时间 X 时自动将颜色从 #fff 更改为 #color-here。无论它是由 CSS 还是 jquery 完成的，都没关系。

有所有 :hover 的东西，但我认为这不是很方便，因为我的页面 B 可能位于浏览器的选项卡中，然后每次打开它时，颜色都会改变。

简而言之 - 任何人都有“页面加载”->“背景颜色为白色”->“背景颜色在 0.5 秒内变为绿色”的解决方案。 -> 故事结束，在重新加载页面/重新启动浏览器之前不会再次更改。

Answer 1

jQuery/CSS 解决方案

CSS:添加一个类loaded，它具有您想要的背景颜色作为背景颜色

body {
    height: 500px;
    width: 500px;
    background-color: transparent;
}

body.loaded {
   background-color: green;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

文档准备好后，将类loaded添加到您的正文中

$(document).ready(function(){
    $("body").addClass("loaded");
});

fiddle :http://jsfiddle.net/R3jjM/