页面加载时自动为页面的背景颜色设置动画[重复]答案

【问题标题】：Animating the background color of a page automatically when a page loads [duplicate]页面加载时自动为页面的背景颜色设置动画[重复]
【发布时间】：2012-02-13 22:07:57
【问题描述】：

可能重复：
jQuery animate backgroundColor

是否可以在页面加载时自动为某个元素的背景颜色设置动画/过渡？

我有一个包含如下数据的页面：

<ul>
    <li> Some stuff</li>
    <li> Some other stuff</li>
    <li class="unread"> Some more stuff</li>
</ul>

对于具有 .unread 类的元素，我希望背景图像以浅黄色开始，然后使其淡入常规页面背景色（在本例中为白色）考虑新的 PM 或通知在facebook上，这就是我想要达到的效果。

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以使用 CSS 属性 transition;

HTML

<div class="transition"></div>

CSS

div.transition {
    height: 100px;
    width: 100px;
    background-color: #ffffff;
    transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
}
div.animated {
    background-color: #ff0000;
}

JavaScript

$(document).ready(function() {
    $('.transition').addClass('animated');
});

见demo。

参考：http://iamchenghan.wordpress.com/2010/05/30/css3-color-animation/

【讨论】：

使用这意味着当用户悬停或单击元素时背景会发生变化。我正在尝试在页面加载后立即更改背景颜色。
是的，更新了我的答案。

【解决方案2】：

在页面上使用 jQuery Color Plugin。

$(function() {
    $(".unread").animate({ backgroundColor: "[hex-here]" }, "slow");
});

其中 [hex-here] 是您的页面背景颜色。

【讨论】：

"大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以动画，但背景颜色不能，除非 jQuery.Color()使用插件。”api.jquery.com/animate
我实际上已经尝试过这段代码，但它不起作用。我通过 CSS 将 .unread 背景颜色设置为 #999，然后将 [hex-here] 更改为 #fff。当页面加载元素时，未读类具有#ccc 背景。没有什么变化。编辑：stefan 说了什么 ^
@Stefan - 谢谢。我已经包含了对颜色插件的引用。
无论如何要在没有任何额外插件的情况下完成此任务？我实际上正在尝试仅使用 CSS 的路线，但如果绝对必要，我会选择使用 jQuery。
@Xecure 你是通过灰色 999 -> CCC 制作动画吗？