javascript - 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");
}

红色也一样......

更新 fiddle :http://jsfiddle.net/rcotjr5y/4/