JQuery FadeIn - Fade in the background image div but not the contents div?

I'm having a hell of a time trying to figure out how to do this:

See http://webid3.feckcorp.co开发者_运维百科m for a live example of the problem.

I'd like to use JQuery to fade in <div id="home_page_back"> (contains the vertically lined gray background behind the main contents), but not fade in the contents in front of it that are included in <div id="content" class="container">.

Right now, I can only seem to make it fade everything in, whereas I only want the background div to fade in.

Anyone who can shed some light on the solution and help me out it'd be much appreciated.

Cheers

SOLVED

I adjusted the z-index of the div to −1 and positioned it absolutely. Simple as this:

z-index:-1;
position:absolute;

You have Just 2 Choices:
1- To put the content div outside home_page_back
2- Use the css3 rule: background-color: rgba(255,0,0,1); for the content div

By the way, this is a pure css problem not jquery problem, which is any transparent element will get all its children elements to be the same transparent.

CSS3 solved this problem by using the rgba color in which you can play with the last value of it to control the opacity, and it will not affect the inner elements.

And you can check for many solutions around these 2 way on google first search results.

Twitter is using this CSS3

Update:
It seams that RGBA is not supported by jquery so may be you will need a plugin for that, or simply create a class in css and give it to that parent element.

I would think something like this should work:

$(document).ready(function () {
$("#home_page_back").hide();
$("#content").fadeTo(0, 0);
$("#home_page_back").fadeIn(500, function(){
    $("#content").fadeTo(500, 1);
    });     
});

You could also use $("#content").hide();, but like this you'll probably get a smoother fade when you need to show #content.

Since #content is a child of #home_page_back, fading in the parent will naturally fade in all the children. Consider extracting the #home_page_back div and putting it as a sibling of #content. You can still get the dimensions you need via CSS.