[JavaScript] Illusorie apparizioni con opacity

In associazione alle nostre evoluzioni AJAX risulta molto apprezzato dare una visuale dinamica delle risultante. In realtà si tratta di effetti illusori. Gestione di elementi di stile volti a rendere la pagina non solo viva, ma gradevole da apprezzare nella sua evoluzione.

Piuttosto che far comparire di botto il risultato testuale di una chiamata AJAX, possiamo farlo comparire gradualmente, a finestrella o in un milione di altri modi. Già l’utilizzo di un loader grafico aiuta ad umanizzare la pagina. Ma oggi vediamo di andare oltre 🙂 .

Creiamo una funzione che ci permetterà di far comparire il contenuto di un elemento della pagina con un effetto ad opacità crescente. Allo stesso modo lo faremo scomparire con un effetto ad opacità decrescente.

Come prima avvertenza vi informo che, nonostante le direttive di opacity siano state introdotte per primo da Micro$oft su IE4 (se non ricordo male), il browser di casa Redmond gestisce in modo del tutto particolare ed imprevedibile le trasparenze. E vuole anche una sua direttiva particolare, per cui, come primo passo andiamo a costruirci una funzione che semplicemente controlli se il client sta usanto IE.

function IEdetect(){
  if (navigator.userAgent.toLowerCase().indexOf("msie") != -1){
    return true;
  } 
}

[MORE] 

Ora passiamo a scriversi due funzioni (ne scriviamo due per comodità) che si occuperanno del fade in e del fade out di un elemento di pagina.

//Per far COMPARIRE un elemento
function opacity_IN(id,op,duration){
 e = document.getElementById(id);
 e.style.display = ‘block’;
 e.style.visibility = ‘visible’;
 
 if(IEdetect()){
   e.style.filter=’alpha(opacity=’+op*10+’)’;
 }else{
   e.style.opacity = op/10;
 }
 op++;
 temp = duration/10;
 if(op <= 10){
  setTimeout("opacity_IN(‘"+id+"’,"+op+","+duration+")", temp);
 }
}

//Per far SCOMPARIRE un elemento
function opacity_OUT(id,op,duration){
 e = document.getElementById(id);
 
 if(IEdetect()){
   e.style.filter=’alpha(opacity=’+op*10+’)’;
 }else{
   e.style.opacity = op/10;
 }
 op–;
 temp = duration/10;
 if(op >= 0){
  setTimeout("opacity_OUT(‘"+id+"’,"+op+","+duration+")", temp);
  if(op == 0){
   e.style.display = ‘none’;
   e.style.visibility = ‘hidden’; 
  }
 }
}

E’ abbastanza semplice. Mando in detect l’elemento interessato al fade, controllo il browser del client e mando in loading il corretto comando, che ripeterà ad intervalli regolari fin tanto che:

• L’opacità non raggiunge il livello massimo, nel caso in cui voglia far comparire un elemento.
• L’opacità non raggiunga zero, nel caso in cui voglia far scomparire un elemento.

Ma non farò solo questo, mi preoccuperò anche di eliminare o riservare lo spazio occupato dall’elemento. Perchè l’opacità setta solo il grado di trasparenza, non lo spazio di pagina preso.

Usare la funzione è molto semplice.

opacity_IN(‘IDElemento’,0,1000);
opacity_OUT(‘IDElemento’,10,1000);

Ovvero il nome ID dell’elemento oggetto della funzione, il grado di opacità di partenza (non siamo costretti a partire da zero, ma è comunque auspicabile) e la durata in millisecondi dell’evento.

Come sempre un esempio pratico in cui si mostra come la funzione possa essere utilizzata su elementi statici e come invece può essere integrata ad una chiamata AJAX.