I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also fade in and out along with the background image. Here is the code snippet that I currently have, but it doesn't work as intended:
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);
});