JQuery 动画和 z-index 无法正常工作

Posted 2023-05-08

【中文标题】JQuery 动画和 z-index 无法正常工作

【英文标题】：JQuery animation and z-index are not working correctly

【发布时间】：2015-08-04 09:54:25

【问题描述】：

我正在尝试制作两个可以通过两个按钮打开和关闭的面板。

FIDDLE

一切正常，当我这样做时：

打开红色面板。 打开绿色面板。 关闭红色面板。

在这种情况下，红色面板在动画期间隐藏在绿色后面。

但是当我这样做时：

打开绿色面板。 打开红色面板。 关闭绿色面板。

动画期间绿色面板始终位于红色面板前面。

但是第一个打开的面板有z-index: 9，第二个打开的面板有z-index: 10。

请帮我解决问题。

【参考方案1】：

它高于它的原因是由于 html。红色是在绿色之前创建的，因此使它们每次都“在下方”动画化的唯一方法是通过 if 语句以编程方式编辑 z-index

在 if 语句中只需更改 z-index ：

if ($messengerPanel.hasClass('open')) 
    sidebarPanelClose($messengerPanel);
    $("#green").css("z-index", "1");
 else 
    sidebarPanelOpen($messengerPanel);
    $("#green").css("z-index", "10");

红色也一样...

更新小提琴：http://jsfiddle.net/rcotjr5y/4/

【讨论】：

我也去掉了样式表中的 z-index :) 如果你想让它们在上面移动，只需在 z-index css 上切换 1 和 10 值 :) 这是什么你想要吗？

【参考方案2】：

检查它是否会起作用 包含在css中

 .open-first
    z-index:-1 !important;

.open
    z-index:1;