Animating the background color of a page automatically when a page loads

Question

Possible Duplicate:
jQuery animate backgroundColor

Is it possible to animate/transition the background-color of a certain element automatically when the page loads?

I have a page with data like this:

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

For elements with the .unread class I want the background image to start off as a light yellow color and then have it fade into the regular page background-color (which is white in this case) Think of a new PM or notification on facebook, that is the effect I am trying to achieve.

Stefan · Accepted Answer · 2012-01-19T08:51:45.060

4

You could use the CSS property 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');
});

See demo.

Reference: http://iamchenghan.wordpress.com/2010/05/30/css3-color-animation/

edited Jan 19 '12 at 08:51

answered Jan 19 '12 at 08:32

Stefan

5,644
4
24
31

Using this would mean that the background changes when a user hovers or clicks on an element. I am trying to change the bg color as soon as the page loads. – Zaki Aziz Jan 19 '12 at 08:40

timmah.faase · Answer 2 · 2012-01-19T08:22:59.483

0

Using jQuery Color Plugin on the page.

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

Where [hex-here] is your page background color.

edited Jan 19 '12 at 08:22

answered Jan 19 '12 at 08:14

timmah.faase

2,219
1
15
23

2

"most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used." http://api.jquery.com/animate/ – Stefan Jan 19 '12 at 08:18
I've actually tried this code but it doesn't work. I set .unread background-color to #999 via CSS and then changed [hex-here] to #fff. When the page loads elements with the unread class has a #ccc background. Nothing changes. EDIT: What stefan said ^ – Zaki Aziz Jan 19 '12 at 08:21
@Stefan - Thanks. I have included reference to color plugin. – timmah.faase Jan 19 '12 at 08:23
Anyway to accomplish this without any additional plugins? I am actually trying to go a CSS only route, but will settle on using jQuery if absolutely necessary. – Zaki Aziz Jan 19 '12 at 08:25
@Xecure are you animating through greys 999 -> CCC? – timmah.faase Jan 19 '12 at 08:26
oops sorry what i meant to write was that my bg color is #999 and then tried to change the bg color to #fff. Honestly I haven't picked the color yet. I was going to play around with it until it looked right. But what do you suggest? – Zaki Aziz Jan 19 '12 at 08:37
@Xecure Grays are much more linear, so moving from a to b will look much nicer if it's grey. I'd say it's impossible to animate in CSS alone. – timmah.faase Jan 19 '12 at 11:02

Animating the background color of a page automatically when a page loads

2 Answers2