使用 TweenMax 淡入 div，背景图案和 z-index 不起作用答案

【问题标题】：Using TweenMax to fade in div with background pattern and z-index not working使用 TweenMax 淡入 div，背景图案和 z-index 不起作用
【发布时间】：2013-06-25 21:26:14
【问题描述】：

我正在尝试使用 TweenMax 为我拥有的这个 div 做这个非常简单的淡入淡出。这是 div 的 css

.aboutBg { 
    background:url(../images/pattern.jpg);
    top:0;
    right:0;
    left:0;
    bottom:0,
    position:fixed;
    border:10px solid red;
    z-index:10;
}

TweenMax.to('.aboutPage', 0.5, {autoAlpha:1});

发生的情况是边框会很好地淡入，但有图案的背景不是，它只是在补间结束时弹出。如果我删除 z-index 一切正常，但我必须设置 z-index 以便它位于我的其他内容之上。另外我没有补间 z-index，它是在补间之前设置的，所以我不确定为什么它没有正确褪色。有人有什么想法吗？谢谢。

【问题讨论】：

哪个浏览器？我最近在 safari 上遇到了类似的问题……z-index: x !important; CSS 声明为我节省了一天。

标签： javascript css tween gsap

【解决方案1】：

首先确保您已升级到 TweenMax 的最新版本。其次，使用 alpha 而不是 autoAlpha 并判断是否有区别。

【讨论】：

嗯，改成 alpha 后还是一样。

【解决方案2】：

我注意到两件事：

您将类命名为“aboutBg”，但补间引用的是“aboutPage”
“bottom:0”后面有一个逗号，而不是分号。

我纠正了这些，对我来说效果很好。如果您仍然遇到问题，请让我们知道您使用的是什么浏览器，并创建一个可以清楚地展示问题的 codepen 或 jsfiddle，以便我们了解上下文。就像上一篇文章所说，请确保您使用的是最新版本的 TweenMax。 http://www.greensock.com/?download=GSAP-JS

【讨论】：