CSS background fade using jquery

Question

I'm trying to figure out how to just fade in the css background color of my site. However, i'm just getting background images with divs or tags in order to fade them. No examples of just a css background color fade in.

 <style type="text/css">
 body {
    background-color: #F00;
 }
 </style>

Any help would be great in figuring this simple problem out.

David

http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor this may help — Joshc, Dec 08 '11 at 00:57

score 2 · Accepted Answer · answered Dec 08 '11 at 00:56

2

You can't animate colors directly with jQuery, however plugins exist to help you out - http://www.bitstorm.org/jquery/color-animation/ for example

answered Dec 08 '11 at 00:56

Zoltan Toth

46,981
12
120
134

score 1 · Answer 2 · answered Dec 08 '11 at 00:57

1

There are several plug-ins available that easily accomplish this functionality:

jQuery Color Plugin

jQueryUI Color Animations:

Bitstorm Color Animation

Usage for nearly all of them:

$('body').animate({ backgroundColor: "White" }, 'slow');


$(this).animate({ backgroundColor: "black" }, 1000);

answered Dec 08 '11 at 00:57

Rion Williams

74,820
37
200
327

do you happen to have the url to the javascript since the site is down it seems? – StealthRT Dec 08 '11 at 00:59
@Rionmonster The plugins site is currently unavailable. – Zoltan Toth Dec 08 '11 at 00:59
Here is a tutorial that might include the plugin within the download : http://desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/ – Rion Williams Dec 08 '11 at 01:01

CSS background fade using jquery

2 Answers2