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淡入影響兄弟姐妹？

回答

相關問題