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/

JQuery fadeTo会影响兄弟姐妹吗？

1 个答案: