[JQuery] Problema z-index pr fading

[battax]

Al click su un elemento (un li di una lista ul) devo creare un effetto fade per tutto il resto della pagina, tranne per l'elemento stesso che deve rimanere in primo piano.

Il problema persiste quando si attiva il fade che invece di coprire tutta la pagina tranne l'elemento chiamante, copre semplicemente tutto, senza distinzioni; come se il "rilancio" dello z-index dell'elemento li tramite jquery non avesse effetto. Come si può far "avanzare" solo l'elemento li chiamante?

Codice CSS:

ul.people {
	list-style: none;
	margin: 0; padding: 0;
	width: 700px;
}
ul.people li {
	float: left;
	margin: 10px;
	padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 3px; 
	overflow:hidden;
}
ul.people li img { width: 150px; border:none; }
ul.people li p { display:none; }
#fade {
    display: none;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: black;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    z-index: 500;
}

Codice Javascript:

function showPeople(id) {
	$('body').css("overflow", "hidden");
	$("#fade").show();
	$("#fade").children("a").attr("href", "javascript:closeFade("+id+")")
	$("#li" + id).children("p").show();
	$("#li" + id).css("z-index", 1000);
}
function closeFade(id) {
	$("#li" + id).children("p").hide();
	$('body').css("overflow", "auto");
	$("#fade").hide();
}

Codice HTML

<ul class="people">
	<li onclick="showPeople(1)" id="li1">
		[img]images/img1bw.jpg[/img]
		

ciao</p>
	
	<li onclick="showPeople(2)" id="li2">
		[img]images/img2bw.jpg[/img]
		

ciao</p>
	[/list]
<div id="fade">X</div>

[mxa]

Mah un modo potrebbe essere questo:

http://jsfiddle.net/mmarcon/LUQfw/

Io l'ho solo abbozzato, poi tu puoi modificartelo come meglio ti piace.
Se usi jQuery usalo come dio comanda, non fare un miscuglio di cose.

[battax]

Grazie!

Effettivamente, il risultato deve essere sostanzialmente quello, ma a me servirebbe (a parte il background che si colora di scuro) che l'elemento selezionato sia anche più avanti (con z-index maggiore) rispetto agli altri poiché poi deve eseguire altre animazioni (che ho omesso e che dipendono dalla posizione dell'elemento LI) che altrimenti andrebbero a "spostare" gli elementi fratelli anziché coprirli.

Senza z-index sarei costretto ad "eliminare temporaneamente" gli elementi che devono essere coperti per poi reinserirli una volta terminata la selezione.

L'ultima cosa è la più banale ma con questa notazione compatta non ho capito come si può agire sullo sfondo. Io ho uno sfondo bianco (come nell'esempio di codice postato) che però deve scurirsi nell'animazione; nel codice ci si limita a lanciare un fade per tutti gli elementi della lista non appartenenti alla selezione, ma per gli altri elementi esterni alla lista?

[battax]

Originariamente inviato da battax
nel codice ci si limita a lanciare un "fade" per tutti gli elementi della lista non appartenenti alla selezione, ma per gli altri elementi esterni alla lista?

per quanto riguarda il fade per gli elementi della lista, si usa siblings (che non conoscevo ma il cui funzionamento mi è ora chiaro), ma per eseguirlo su tutti gli elementi anche al di fuori dalla lista?

[battax]

visto che nessuno mi ha saputo rispondere sulla questione z-index mi sono ingegnato diversamente (nascondo temporaneamente gli elementi da coprire), l'unico problema a questo punto riguarda il fade... come faccio ad impostare il fade per tutti gli elementi tranne per quello attivo?

Ho provato a fare una cosa del genere (tra i tanti tentativi) ma il "not" non collabora (this è l'elemento "attivo", sul quale è stato attivato il click).

$('body').children().not(this).fadeTo('slow', 0.2).removeClass('selected');

edit: ho anche provato a mettere come parametro del not anche la stringa di selezione del CSS (escludendo anche i fratelli dell'elemento che poi avrei "trattato" a parte), ma anche in quel caso nessun risultato.