CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The Hawk
The Hawk

Reputation: 1568

Fade In Background Without Certain Divs

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);
});

Upvotes: 4

Views: 129

Answers (1)

alexmattorr
alexmattorr

Reputation: 362

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.

Upvotes: 1

Related Questions