JQuery fadeTo影响兄弟

JQuery fadeTo affects siblings?

本文关键字：兄弟 影响 fadeTo JQuery      更新时间：2023-09-26

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/

请记住，要使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/

相关文章：