【问题标题】: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 制作动画吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-27
    • 1970-01-01
    • 2017-10-30
    • 2019-08-08
    • 2015-09-21
    • 1970-01-01
    相关资源
    最近更新 更多