Fade In Background Without Certain Divs

Question

I have a background image that I want to fade in and out. So I use jQuery fadeIn and fadeOut for my wrapper div. The problem is the wrapper div has my sidebar and navigation as position:absolute within the wrapper div, and they also fade in and out with the background image of the wrapper div. Here is the code (which doesn't work. It fades everything.):

HTML:

<div class="wrapper">
    <div class="main">
        <div class="navigation"></div>
        <div class="sidebar"></div>
    </div>
</div>

CSS:

.wrapper {
    position:relative;
}

.navigation {
    position:absolute;
    top:80px;
    left:200px;
}

.sidebar {
    position:absolute;
    top: 80px;
    right: 200px;
}

JavaScript:

var wrapper = $(".wrapper").not(".sidebar, .navigation");
wrapper.fadeOut(2000, function () {
    wrapper.css("background", "url(" + image + ")");
    wrapper.fadeIn(2000);
});

have you tried adding a <div> just for the background image and position it absolutely underneath with 100% width and height and fade that div ? — Joel Almeida
If they [sidebar and navigation] are positioned absolutely, why do you make yourself a trouble placing them inside wrapper? Make a container that has wrapper inside and main as child controls. And fade wrapper independently — Kirill Slatin

alexmattorr alexmattorr · Accepted Answer · 2015-05-26T14:59:42

I would suggest instead of doing the wrapper itself, do a wrapper-overlay that contains the image.

<div class="wrapper-overlay"></div>
<div class="wrapper">
    <div class="main">
        <div class="navigation"></div>
        <div class="sidebar"></div>
    </div>
</div>

.wrapper-overylay {
position: absolute;
z-index: above wrapper, below sidebar and nav;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Or you could just move the sidebar and nav outside of the wrapper (this might be the better approach), and sit on top of it all together.

Fade In Background Without Certain Divs

1 Answers