Question

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

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

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

$(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

问题是，您的动画文本是.hide2的子级。而且.hide1和.hide2具有相同的z-index，因此从技术上讲，后面的元素（.hide2）将具有更大的z-index。要解决此问题，请添加/更改以下CSS：

ExpandoObject

，然后使用伪元素在整个.hide1 / .hide2 div上覆盖颜色（因为在这种情况下，实际上不可能将子级置于父级之后。因此，还要添加以下CSS

.hide1 {
  z-index: 12;
}

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

jQuery动画忽略了z-index错误

1 个答案: