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;
}