simple jquery fade in bg question

Question

Im trying to have my background fade in onclick with jquery and im unsure on how to do it. Here is my code:

$(".work").click( function(){ 
    $("body").removeClass('bg2 , bg3').addClass("bg1");
});

$(".about").click( function(){ 
    $("body").removeClass("bg1 , bg3").addClass("bg2");
});

$(".contact").click( function(){ 
    $("body").removeClass("bg1 , bg2").addClass("bg3");
}); 

thanks :D

Answer 1

If you are already using the jQuery UI plug-in, they allow for the animation of color. You can do it like this:

$("body").animate({"background-color": "red"}, 1000);

And you can animate to any color you want. To give a "fade" effect, just have it animate out to white and then back into the color. If you are not using jQuery UI, this may add too much overhead to your site, so you might want to check out the jquery.color plugin. Only 4kb in size.

Here is an example of the fading using jQuery UI: http://jsfiddle.net/9VhpM/

Update

I didn't realize you were looking to fade the background image. You may find this helpful: Image Loading | jQuery for Designers