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

Question

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

See http://webid3.feckcorp.com 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;

http://stackoverflow.com/questions/2652281/jquery-fade-in-background-colour — AR., Jun 14 '11 at 23:30

Amr Elgarhy · Answer 1 · 2011-06-14T23:59:02.967

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 enter image description here

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 tried using Solution #2 but it did not change the fadein - the content still faded in. I guess you found out that RGBA doesn't work with JQuery. Oh well.. — , Jun 15 '11 at 00:11

score 0 · Answer 2 · answered Jun 14 '11 at 23:31

0

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.

answered Jun 14 '11 at 23:31

glortho

13,120
8
49
45

I attempted doing this quickly, but it still didn't seem to work oddly. I put #home_page_back as a child of #content but it still faded both the content and child (as well as made the background smaller.. which of course can be changed via CSS) – Jun 15 '11 at 00:12

Kristoffer la Cour · Accepted Answer · 2011-06-15T00:02:38.050

0

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.

edited Jun 15 '11 at 00:02

answered Jun 14 '11 at 23:42

Kristoffer la Cour

2,591
3
25
36

I tried this, but it made the entire content including the background image hidden? Check out the web address in the OP to see what happened. Please advise – Jun 14 '11 at 23:47
I've tried making a new piece of code, but i'm not sure if this is what you wanted?.. – Kristoffer la Cour Jun 15 '11 at 00:04
Kristoffer, I'd definitely prefer to use your method seeing that it seems to be the easiest rather than having to reorganize everything in CSS, but it doesn't seem to be working for me. When I exchanged the css('opacity', '0') with hide() it just completely hide all the content and the background. If you have any other solutions, I'd happily try them out!! – Jun 15 '11 at 00:09
Ah I'm sorry, I didn't see that you edited the original code. Just tried it - it looks much better than before but I'm really looking to make the content div not fade at all and just appear immediately - then have the home_page_back div fade in behind – Jun 15 '11 at 00:18
Okay, in that case i don't really have a solution, since the content div is part of home_page_back, it can not be visible while home_page_back is hidden... You might want to look for a solution to fade in the background image though, like in this post: http://stackoverflow.com/questions/977090/jquery-fade-in-background-image Or this: http://stackoverflow.com/questions/2408761/jquery-fadeout-fadein-background-image-on-hover – Kristoffer la Cour Jun 15 '11 at 00:49
No problem, I solved it myself by adding a z-index and positing to CSS. I marked your answers as my selected solution because it came closest to what I needed and you worked the hardest on it. Thank you! – Jun 15 '11 at 01:21

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

3 Answers3