javascript - 在没有某些 div 的情况下淡入背景

Question

我有一张背景图片，我想淡入淡出。所以我为我的包装器 div 使用 jQuery fadeIn 和 fadeOut。问题是 wrapper div 有我的侧边栏和导航作为 position:absolute 在 wrapper div 内，它们也随着 wrapper div 的背景图像淡入淡出。这是代码(不起作用。它会淡化所有内容。):

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

Answer 1

我建议不要自己做包装器，而是做一个包含图像的包装器叠加层。

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

或者您可以将侧边栏和导航栏移到包装器之外(这可能是更好的方法)，然后将它们放在一起。