Ciao, ho apportato piccole modifiche di carattere esemplificativo, per animare il riquadro ho inserito la classe "cl_animate" al div relativo in modo che al click cambiando la posizione sia eseguita l'animazione.
Per i click ripetuti è stato sufficiente controllare se era in atto una dissolvenza per non eseguire più volte l'azione.
Ho inserito inoltre il display:none quando l'opacità diventava = 0 altrimenti era ancora possibile eseguire il click.
In merito all'oggetto "Dissolve = { ... } " è una struttura javascript che permette di definire proprietà e metodi al suo interno però non permette l'istanziazione multipla.
Avevo erroneamente interpretato la sola necessità di creare delle "dissolvenze". Scusa.
Saluti Tony.
codice:<!DOCTYPE> <html> <head> <style> body { background-color:#FFD; overflow:hidden;} div { text-align:center; font:16px Arial; } .cl_animate { transition: all 1.2s linear; } </style> <script> function f_act_dissolve(){ if(Dissolve.act) return false; // se dissolvenza attiva non considerare i click Dissolve.Add("id_btn"); Dissolve.Add("id_home"); setTimeout(function(){ var j=document.getElementById("id_home"), p=j.style.left, pos=(p=="50%")?"130%":"50%"; // sposta da destra al centro (con animazione) o da centro a destra j.style.left=pos; },55); // attendi che l'elemento sia in display:block altrimenti l'animazione potrebbe non essere eseguita. } //------------------------------------------------------------------------------ Dissolve={ act:0, // se 0 nessuna dissolvenza in atto aidn:[], // array di parametri delle dissolvenze tm:50, // tempo di attesa variazione di opacità (setTimeout) ostep:0.05, // variazione di opacità di default Add:function(idn,stp){ // idn è il nome dell'ID dell'elemento da nascondere/far comparire with(Dissolve){ if(!stp) stp=ostep; // se non indicata usa il valore di default var d,o,j=document.getElementById(idn); // j contiene è l'elemento su cui modificare l'opacità o=parseInt(j.style.opacity); // o contiene il valore di opacità iniziale 1.0 oppure 0.0 if(!o) o=0; // se non settata poni a 0 d=(o>0.5)?-1:1; // d determina se incrementare o decrementare l'opacità iniziale if(d>0) j.style.display="block"; // visualizza elemento in display:none aidn.push([j,o,d,stp]); // metto nell'array aidn i 4 parametri necessari al ciclo di dissolvenza if(!act) { act=1; Cycle(); } // se non è attiva alcuna dissolvenza in Cycle() lancio la funzione }}, Cycle:function(){ with(Dissolve){ var r,n=aidn.length; // n contiene il numero di dissolvenze da processare if(!n) { act=0; return; } // se non ce ne sono esco da Cycle() for(r=0;r<n;r++) Dis(r); // per ogni gruppo di parametri che compongono una dissolvenza eseguo uno step di inc/dec dell'opacità for(r=n-1;r>=0;r--) if(!aidn[r].length) aidn.splice(r,1); // quando termina una dissolvenza l'array dei 4 parametri viene annullato (*) e deve essere tolto da aidn in modo che non venga più eseguito setTimeout(function(){ Cycle(); },tm); // ripeti Cycle ogni tm millesimi di secondo (fino a quando ci sono elementi in aidn ) }}, Dis:function(r){ with(Dissolve){ var D=aidn[r]; // D è l'array dei 4 parametri di dissolvenza da processare D[1] += (D[3]*D[2]); // D[1] è l'opacità attuale che deve essere incrementata di D[3] in valore assoluto (D[2] determina la direzione +1 -1) if(D[1]<0) { // se l'opacità è <0 il decremento è finito D[1]=0; D[0].style.display="none"; // non più cliccabile } if(D[1]>1) { D[1]=1; // se >1 l'incremento è finito } D[0].style.opacity=D[1]; // imposto l'opacità per l'elemento (D[0]) if(!D[1] || D[1]==1) aidn[r]=[]; // se l'incremento o il decremento è finito annullo i 4 parametri della dissolvenza (*) }} } //------------------------------------------------------------------------------ </script> </head> <body> <!-- div contenitore della Home page --> <div id='id_home' class='cl_animate' style='position:absolute;left:130%;top:50%;margin:-300px;width:600px;height:600px;background-color:#48E;opacity:0.0;'> <br><span onclick='f_act_dissolve();' style='cursor:pointer;text-decoration:underline;'>Torna indietro</span> </div> <!-- div contenitore pulsante --> <div id='id_btn' style='position:absolute;left:50%;top:50%;margin:-60px;width:120px;height:120px;background-color:#FF0;opacity:1.0;'> <br>Test<br> <br> <button onclick='f_act_dissolve();' style='cursor:pointer;'>Entra nel sito:</button> </div> </body> </html>
Rispondi quotando
Originariamente inviata da Tonenge
