jQuery 动画忽略 z-index 错误

Question

我正在使用 jquery 向上滑动 3 行文本，一次一行。我正在使用 2 divs 来隐藏文本。文本会在 2 div 之间向上滑动几秒钟，直到它可见。

但是，z-index 不起作用，因此文本始终可见。

谷歌搜索，堆栈溢出...

$(document).ready(function() {
    $('.show1').animate({'bottom':'115px'},500).delay(2000).animate({'bottom': '200px'},500);
    $('.show2').delay(3000).animate({'bottom':'115px'},500).delay(2000).animate({'bottom': '200px'},500);
    $('.show3').delay(6000).animate({'bottom':'115px'},500).delay(2000).animate({'bottom': '200px'},500);
});

文本最初应该被第一个 div 隐藏，然后当它向上滑入另一个 div 时再次隐藏。

此处示例：https://codepen.io/bkdigital/pen/NWKXqrN

Answer 1

问题是，您的动画文本是 child .hide2。此外，.hide1 和 .hide2 具有相同的 z-index，因此后面的元素 (.hide2) 在技术上将具有更大的 z-index。要解决此问题，add/change 以下 CSS：

.hide1 {
  z-index: 12;
}

然后使用伪元素覆盖整个 .hide1/.hide2 div 的颜色（因为在这个 parent 后面不可能有 child case. 所以还要加上下面的 CSS

.hide1:before,
.hide2:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  z-index: 10;
}

JSFiddle：https://jsfiddle.net/udqm8npa/

jQuery 动画忽略 z-index 错误

jQuery animate ignores z-index bug

html

css

jquery

jquery-animate