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>