不透明度动画期间的css z-index变化

Question

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

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

这里是JSBIN，尝试点击fadeIn / fadeOut按钮，注意当它转换时，盘子如何短暂地落在底部堆栈后面。

http://jsbin.com/wefediti/1/

请帮忙。

Answer 1

由于您的jQuery.each()因此将同步处理淡入淡出的动画，因此您的方法无法在同一时间使其淡入淡出。

我建议您将这些图片合并到同一div中，如果可能的话，将它们淡化：

<强> DEMO

Answer 2

这是你的div的定位

我编辑了。您需要做的就是将您的div正确堆叠，然后重新编辑您的绝对位置。但它有效

EDITED CODE

让我更具体一点。

更改你的divs谎言的顺序：

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

这将解决您的z-index问题。我也为JS的每个div做了一个不同的调用，但那是出于测试目的。我认为通过一次通话你很好

我也进行了定位编辑HERE

但似乎每个人都在修改它，所以快点之前其他人搞砸了哈哈

Answer 3

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

}

同时做同样的事。它有效。