L'animazione JQuery e lo z-index non funzionano correttamente

Question

Sto provando a creare due pannelli che possono essere aperti e chiusi da due pulsanti.

FIDDLE

Tutto sta funzionando bene, quando faccio così:

1. Aprire pannello rosso.
2. Aprire il pannello verde.
3. Chiudere il pannello rosso.

In questo caso il pannello rosso si nasconde dietro il verde durante l'animazione.

Ma quando faccio così:

1. Aprire il pannello verde.
2. Aprire il pannello rosso.
3. Chiudere il pannello verde.

Il pannello verde sempre davanti al pannello rosso durante l'animazione.

Ma il primo pannello aperto ha z-index: 9 e il secondo aperto ha z-index: 10.

Per favore, aiutami a risolvere il problema.

Answer 1

Il motivo per cui va sopra è dovuto all'html. il rosso è stato creato prima del verde quindi l'unico modo per renderli animati "sotto" ogni volta sarebbe quello di modificare lo z-index a livello di codice attraverso le istruzioni if ​​

Nelle istruzioni if ​​basta cambiare z-index:

if ($messengerPanel.hasClass('open')) { 
    sidebarPanelClose($messengerPanel); 
    $("#green").css("z-index", "1"); 
} else { 
    sidebarPanelOpen($messengerPanel); 
    $("#green").css("z-index", "10"); 
} 

lo stesso per il rosso troppo ...

violino aggiornato: http://jsfiddle.net/rcotjr5y/4/

Answer 2

verifica se funzionerà includere nel css

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