mettere una pausa all'interno di una funzione

[TeraBIT]

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 :

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

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...

[artorius]

prova a metterlo qui:

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;
toggleDisplay(element);
element.style.opacity = newOpVal;
element.style.filter =
'alpha(opacity = ' + (newOpVal*100) + ')';

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

[TeraBIT]

ho provato ma non ho capito esattamente come inserircela, alla fine le due funzioni restano separate...


un risultato l'ho ottenuto con la seguente stringa :

}else{ setTimeout("document.getElementById(eid).style.display = 'none'",TimeToFade);

che fà comparire il fade out dell'elemento, ma non ripristina il display:none e resta quindi interagibile, in pratica non esegue la stringa per cui gli si chiede di aspettare, non capisco perchè...

[TeraBIT]

mi và bene anche tenerle separate (anzi è meglio così sono riuscito anche a implementarla nell'index col preload per farlo apparire in fade e il parametro display non è indispensabile), però mi serve che il display del menù venga messo su none dopo il tempo specificato, la pausa c'è ma il display non cambia, come se il comando non ci fosse più e quindi si vede il fade ma non avviene il display:none...qualcuno sà come correggere quella riga di setTimeout?

[artorius]

setTimeout("function(){document.getElementById(eid ).style.display = 'none';}",TimeToFade);

Prova cosi, il motivo è che setTimeout necessita di una funzione da chiamare, non di una istruzione.

[TeraBIT]

anche così se si clicca per far apparire il menù questo compare correttamente, mettendo display:block e comparendo in fade, ma cliccando per farlo scomparire(su X o l'area esterna al box) avviene solo il fade ma si resta "intrappolati" nel menù, prova che a fade effetuato il display non viene reimpostato su none...ma perchè?

il menù è presente in tutte le pagine eccetto l'index...

[artorius]

Ma ci credo l'ID è fuori dallo scope della funzione.

fai cosi:

function setNone(eid)
{
document.getElementById(eid).style.display = 'none';
}


poi metti nella tua funzione:

setTimeout("setNone('"+eid+"')",TimeToFade);

Dovrebbe andare

[TeraBIT]

funziona...funziona! FUNZIONAAAAA!!!!!!!!

grazie mille!! thank you! danke! arigato!!! yuppii!!!!!