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

前端之家收集整理的这篇文章主要介绍了javascript – JQuery动画和z-index无法正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试制作两个可以通过两个按钮打开和关闭的面板.

FIDDLE

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

>打开红色面板.
>打开绿色面板.
>关闭红色面板.

在这种情况下,红色面板在动画期间隐藏在绿色背后.

但是当我喜欢这样的时候:

>打开绿色面板.
>打开红色面板.
>关闭绿色面板.

动画期间,绿色面板始终位于红色面板的前面.

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

请帮我解决问题.

解决方法

它之所以超越它是因为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/

猜你在找的jQuery相关文章