Fade from #7495BA to #67C65D when page opens

Question

I need some script that enables all CSS that currently use #7495BA in any of the elements to fade to #67C65D when the page loads. Only the one change, not fading between, and not with any prompting from hovering or clicking, just on the page request, start from the blue color and then fade into the green.

The theory behind this is that then recognizable format of the site will still be there, but as this particular page is not the index the change in colors should be noticeable from the normal to the abnormal. I have the idea in my head but no idea of how to make it!

Please help!!

What properties are we talking about? Font colour, background colour, border colour...? — Precastic, Jun 22 '13 at 22:12
This would be a very slow process if you have a lot of elements on your page. You are better off giving all the elements that you want changed a class so that you can target them directly. — Precastic, Jun 22 '13 at 22:44
possible duplicate of [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Gideon, Jun 23 '13 at 08:04

sinisake · Accepted Answer · 2013-06-22T22:44:41.933

This should work for background color:

$(document).ready(function() {



$('body *').each(function() {
    color='rgb(116, 149, 186)';



 if($(this).css('background-color')==color) {
    $(this).animate({
backgroundColor: '#67C65D'
}, 2000 ); 
 }
});





});

HTML:

<body>
<div id="header">sss</div>
<div id="content">ddd</div>
<div id="footer">fffff</div>

</body>

CSS:

#header { background-color: #7495BA; height:50px;width:100%; }
#content {
    width:100%;
    height:300px;
    background-color:red;
}
#footer {
    width:100%;
    height:50px;
    background-color: #7495BA;
}

Of course, you will need this plugin: http://www.bitstorm.org/jquery/color-animation/

Edit 2: http://jsfiddle.net/NCctc/

Fade from #7495BA to #67C65D when page opens

1 Answers1