JQuery fadeTo 影响兄弟姐妹？

Question

fadeTo() 函数没有像我预期的那样工作。

我的 HTML 结构是这样的：

<div id="headerBlog"></div>
<div id="headerBlog2"></div>

<div id="menuBlog">
       <h1>Blog</h1>
       <ol id="nav">
           <li><a href="index.html"><img class="navButton" src="images/vcircleLeft.svg"/></a>
           <li><a href="index.html">Homepage</a></li>
       </ol>
</div>

menuBlog 的元素显示在headerBlog 上。 headerBlog 有一个背景图片。 headerBlog 下面是 headerBlog2，它还有一个背景图像。 现在，当我尝试在 headerBlog, 上使用 fadeTo() 来创建交叉淡入淡出时，menuBlog 的元素突然消失，然后又慢慢淡入。怎么会这样，因为它们只是兄弟节点？

我的 JQuery 代码是这样的：

setInterval(fadeBackground, 2000);

function fadeBackground() {
    var header = $('#headerBlog');
    header.fadeTo(4000, 0);
}

这里是 jsFiddle：http://jsfiddle.net/ztt96da0/

Answer 1

请记住，要使z-index 工作，您需要使用relative 或absolute 定位。如果不在 #headerBlog 和 #menuBlog 上声明这些属性，您的 z-index 定义的堆叠顺序将无法按预期工作。

此外，在您的示例中没有充分的理由使用负 z 索引。将 z-index 更改为正值，并将 #menuBlog z-index 设置为最高值以使其保持在顶部：

#headerBlog { 
    z-index: 2;
    position: relative;
}
#headerBlog2 { 
    z-index: 1;
    position: absolute;
}
#menuBlog {
    height: 0px;
    position: relative;
    z-index: 10;
}

在这里查看工作小提琴：http://jsfiddle.net/ztt96da0/1/