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

【问题标题】：css z-index changes during opacity animation不透明动画期间的 css z-index 变化
【发布时间】：2014-04-18 06:21:01
【问题描述】：

我有一个非常简单的页面，有几叠 div，每个 div 里面都有图片。

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

这里是 JSBIN，尝试单击 fadeIn/fadeOut 按钮并注意板在转换时是如何短暂地移到底部堆栈后面的。

请帮忙。

【问题讨论】：

【解决方案1】：

由于您的jQuery.each() 以及淡出动画将被同步处理，因此您的方法不可能使它们同时淡出。

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

【讨论】：

【解决方案2】：

这是你的 div 的定位问题

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

让我更具体一点。

改变你的 div 的顺序：

<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

但是好像大家都在修改，所以在别人搞砸之前快点吧lol

【讨论】：

@badcoder div 堆叠非常严格，除非你想用 z-index 来改变它，在这种情况下它对你不利。因此，您必须采用原始的 div 分层方式。如果您有更多层，请使用伪代码 :after 和 :before 来管理一些层的定位，但这很容易出错，并且您会遇到旧浏览器的问题

【解决方案3】：

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

}

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

【讨论】：