z-index fadIn 与 jQuery 交叉不透明度
我在使用 jquery 的图层上使用 z-index 和 fadIn 时遇到了一件奇怪的事情。没有 fadeIn 但只是显示没有问题：
这是我的设置：
Layer 1 (-2), position: absolute
Layer 2 (fadeIn) (-1), position: relative
Layer 3 ( none / 1), position: absolute
Layer 4 (fadeIn) (2), position: absolute
由于我没有在第 3 层上使用 z-index 值，所以 fadIn 工作正常，期望第 3 层在与第 1 层交叉的地方获得不透明度。
如果我在第 3 层上使用 z-index 值，在过渡时不再有与第 1 层交叉的不透明度，但第 4 层仅在第 1 层淡入后才会显示。
在使用 z-index 或在淡入的上下文中？有什么办法吗？
I experience a strange thing while using z-index with fadIn on layers with jquery. Without fadeIn but just show there are no problems:
Here's my setup:
Layer 1 (-2), position: absolute
Layer 2 (fadeIn) (-1), position: relative
Layer 3 ( none / 1), position: absolute
Layer 4 (fadeIn) (2), position: absolute
Since I'm not using a z-index value on Layer 3 the fadIn works fine expect that Layer 3 gets an opacity where it crosses with Layer 1.
If I'm using a z-index value on Layer 3 there is no more opacity crossing with Layer 1 while the transition but Layer 4 will show up only after the fadeIn of Layer 1.
Is there anything I overlooked on the use on z-index or in context with fadeIn? Something that does the trick?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，这是我找到的解决方案：
出了什么问题：
所有四个图层都是我实际淡入的 div 的子级。我建议在执行此操作时，不同的 z-index 状态将被忽略，并且“转换完成后重新激活”。
解决方案：
虽然我没有更改任何 html 标记，但我只是在脚本中添加了一些标记，并同时分别隐藏/淡入每个子元素。这在某种程度上使所有 z-index 保持完整。
Ok, here is the solution I came to:
What was wrong:
All four Layers were children of the div I actually fade in. I suggest while doing that the different z-index status are beeing ignored and "reactivated" once the transition is complete.
Solution:
While I didn't change any of the html markup I just added some markup to my script and hided/fadedIn each child seperately at the same time. This somehow keeps all z-index intact.