mentre apetto un aiutino per il mio thread precedente ho trovato una soluzione carina e leggera per far apparire scomparire elementi inline dell'html via java, da applicare al div contenente il menù per cambiare i fogli di stile.

con il codice che ho trovato sul blog di stikiflem è possibile effettuare il fade in e out di un elemento, ma agisce solo sulla visibilità, rendendo di fatto gli elementi seppur invisibili ancora selezionabili, con il codice che ho trovato sul blog circlecube è possibile agire sull'attributo display nascondendo di fatto gli elementi, ho pensato quindi di combinarli insieme come segue per far comparire e scomparire del tutto un elemento :
codice:
var TimeToFade = 400.0;

function fade(eid){

var element = document.getElementById(eid);
if(element == null)
return;

if(element.FadeState == null){
element.FadeState = -2;
}

if(element.FadeState == 1 || element.FadeState == -1){
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;

}else{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime()
+ ",'" + eid + "')", 33);
}
}

function animateFade(lastTick, eid){

var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if(element.FadeTimeLeft <= elapsedTicks){

element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;

return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;

element.style.opacity = newOpVal;
element.style.filter =
'alpha(opacity = ' + (newOpVal*100) + ')';

setTimeout("animateFade(" + curTick
+ ",'" + eid + "')", 33);
};



function toggleDisplay(eid) {

var element = document.getElementById(eid);
if(element == null)
return;


  if(document.getElementById(eid).style.display == "none" ) {
    document.getElementById(eid).style.display = "block";
	
  }else{ 
    document.getElementById(eid).style.display = "none";
  }
}
tutto funziona alla perfezione, cliccando viene attivato il display dell'elemento(block) e poi compare dal nulla con un gradevole fade, il problema è quando deve sparire di nuovo perchè il display viene subito ridisattivato(none) senza dare il tempo di vedere il fade out

vorrei inserire una pausa nello script alla 3° riga partendo dal fondo, quando deve reimpostare il display su none in modo che attenda la durata del fade out(TimeToFade) e quindi a fade effettuato nasconda del tutto l'elemento, ho pensato di inserire un
codice:
setTimeout("qualcosa()",TimeToFade)
ho provato tutte le combinazioni possibili ma non riesco a farlo funzionare...come si fà?


PS: questa soluzione però richiede che all'evento onclick vengano associate entrambe le funzioni "fade" e "toggleDisplay", se trovate un modo per far si che la prima attivi anche la seconda così che diventino una sola e non debbano essere chiamate separatamente sarebbe meglio...