我有一张背景图片,我想淡入淡出。所以我为我的包装器 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);
});
最佳答案
我建议不要自己做包装器,而是做一个包含图像的包装器叠加层。
<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%;
}
或者您可以将侧边栏和导航栏移到包装器之外(这可能是更好的方法),然后将它们放在一起。
关于javascript - 在没有某些 div 的情况下淡入背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30462003/