Question

可能重复：
jQuery animate backgroundColor

当页面加载时，是否可以自动动画/转换某个元素的背景颜色？

我有一个包含这样数据的页面：

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

对于具有.unread类的元素，我希望背景图像以淡黄色开始，然后淡入常规页面背景颜色（在这种情况下为白色）想想新的PM或通知在Facebook上，这就是我想要达到的效果。

Answer 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/

Answer 2

在页面上使用jQuery Color Plugin。

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

[hex-here]是你的页面背景颜色。

在页面加载时自动为页面的背景颜色设置动画

2 个答案: