Javascript css z索引在不透明度动画期间更改

我有一个非常简单的页面，有几个div堆栈，每个div都有一个和图像

每个堆栈将根据滚动位置淡入淡出，顶部堆栈有一个与底部堆栈重叠的对象，并且在动画期间，由于某种原因，z索引会发生变化

这是JSBIN，试着点击fadeIn/fadeOut按钮，然后注意板在转换时是如何短暂地落在底部堆栈的后面的

---

请提供帮助。

由于您的

jQuery.each（）

，因此淡入淡出的动画将同步处理，因此您的方法不可能使它们同时淡出

我建议您将这些图像合并到同一个

div

中，并在可能的情况下对其进行淡入淡出：

---

这是一个关于你的DIV定位的问题

我编辑。你所需要做的就是将你的div叠加到右边，然后重新编辑你的绝对位置。但它是有效的

让我更具体一点

更改您的divs liek的顺序，以便：

<div class="page1">
  <img src="http://i.imgur.com/BleOC.jpg">
</div>
<div class="page">
  <div class="bg"></div>
</div>

这将解决z索引问题。我也从JS中为每个div调用了不同的函数，但这是为了测试目的。我想你打个电话就可以了

我也做了定位编辑

但似乎每个人都在修改它，所以在别人把它弄糟之前快点，哈哈

  function fadePages(num) {  
  $(".page").animate({
    opacity: num
    }, 1000*(num+1));

}

---

同时做同样的事。它可以工作。

当你运行它时，它会被包含。查找右上角显示“编辑”的位置。这是一种小提琴的形式。在设计中，有更多的堆栈按顺序淡入，所以我不能改变HTML的结构。没有办法绕过它吗？如果不使用hacks？@badcoder div堆栈非常严格，除非你想用z-index修改它，在这种情况下，z-index对你不利。因此，你必须采用原始的分层方式。如果您有更多的层，请使用伪代码：after和：before来管理一些层的定位，但这是一个偶然的过程，您将遇到与旧浏览器相关的问题