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

Question

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

小提琴

一切正常,当我喜欢这样的时候:

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/