JQuery淡入影响兄弟姐妹？

fadeTo（）函数不像我期望的那样工作。JQuery淡入影响兄弟姐妹？

我的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/

来源

2015-09-05 Goldlöckchen

你能不能给我们一个[的jsfiddle ]（http://www.jsfiddle.net）？ – Okx

是的，在这里：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/

来源

2015-09-05 13:07:05 Terry

非常感谢！不知道定位问题！ –

JQuery淡入影响兄弟姐妹？

回答

相关问题