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

Posted 2023-05-08

【中文标题】页面加载时自动为页面的背景颜色设置动画[重复]

【英文标题】：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上，这就是我想要达到的效果。

【参考方案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 制作动画吗？