Question

我有一张背景图片，我想淡入淡出。所以我使用jQuery fadeIn和fadeOut作为我的包装器div。问题是包装div有我的侧边栏和导航作为位置：绝对在包装div内，它们也淡入和淡出包装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%;
}

或者你可以移动侧边栏并在包装器之外导航（这可能是更好的方法），并且一起坐在它上面。

在没有特定Div的情况下淡入背景

1 个答案: