时间戳

首页 > 解决方案 > jQuery animate 忽略 z-index 错误

jquery - jQuery animate 忽略 z-index 错误

问题描述

我正在使用 jquery 向上滑动 3 行文本，一次一行。我正在使用 2 个 div 来隐藏文本。文本在 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

标签： jqueryhtmlcssjquery-animate

解决方案

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

.hide1 {
  z-index: 12;
}

然后使用伪元素将颜色覆盖在整个 .hide1/.hide2 div 上（因为在这种情况下，实际上不可能将子级放在父级后面。所以还要添加以下 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/

推荐阅读