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

Question

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

FIDDLE

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

1. 打开红色面板。
2. 打开绿色面板。
3. 关闭红色面板。

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

但是当我这样做时：

1. 打开绿色面板。
2. 打开红色面板。
3. 关闭绿色面板。

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

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

请帮我解决问题。

Answer 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/

Answer 2

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

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