Newsgroup: it.comp.lang.javascript
Titolo: Leeeeeeeentezza Mozilla

Salve a tutti!
In questi giorni sto cercando di creare degli effetti di 
animazione attraverso Js + XHtml, perché per varie ragioni 
preferisco non utilizzare Flash.
In particolare, voglio fare in modo che, al caricamento della 
pagina, 3 immagini (collocate ognuna all'interno di un apposito 
DIV) appaiano attraverso un effetto "fade-in".
Ebbene, questo è il codice che ho realizzato:
==============================
<!doctype html public "-//W3C//DTD XHTML 1.0 
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml
" lang="it" 
xml:lang="it">
<head>
<style>
   #flash1 {position:absolute; top:0px; z-index:100; 
filter:Alpha(Opacity=0); -moz-opacity:0;}
   #flash2 {position:absolute; top:150px; z-index:100; 
filter:Alpha(Opacity=0); -moz-opacity:0;}
   #flash3 {position:absolute; top:300px; z-index:300; 
filter:Alpha(Opacity=0); -moz-opacity:0;}
</style>
<script type="text/javascript" language="JavaScript">
// Questa funzione serve per far apparire le immagini ad 
intervalli di 1 secondo una dall'altra
function show(num)
{
   nomeDiv = "flash" + num;
   interv = 1000 * num;
   setTimeout("flashDiv('" +nomeDiv+ "',0)",interv);
}
// Questa funzione si occupa di aumentare progressivamente 
l'ALPHA dei DIV
function flashDiv(nomeDiv,a)
{
   myDiv = document.getElementById(nomeDiv);
   if (a<100)
   {
      if (navigator.appName.indexOf("Netscape") == -1) 
{myDiv.style.filter = "alpha(opacity=" +a+ ")";}
      else {myDiv.style.MozOpacity = a + '%';}
      a+=10;
      setTimeout("flashDiv('" +nomeDiv+ "'," +a+ ")", 50);
   }
}
</script>
</head>
<body onload="show(1);show(2);show(3);">
      <div id="flash1"><img src="images/flash1.gif" width="100" 
height="100" border="1" alt=""/></div>
      <div id="flash2"><img src="images/flash2.gif" width="100" 
height="100" border="1" alt=""/></div>
      <div id="flash3"><img src="images/flash3.gif" width="100" 
height="100" border="1" alt=""/></div>
</body>
</html>
==============================
Su IE 6 funziona a meraviglia... ma Mozilla 1.3 si comporta in 
modo stranissimo. Innanzi tutto è lentissimo: l'animazione ci 
mette diversi secondi per giungere alla fine!
In secondo luogo, i DIV con le 3 immagini LAMPEGGIANO!! Proprio 
così, a tratti spariscono per poi riapparire qualche secondo 
più tardi, finché finalmente la proprietà "alpha" arriva al 
100% e l'animazione finisce.
Ho cercato in lungo e in largo una spiegazione, ma senza 
risultati.
Qualcuno di voi ha delle idee?
Grazie mille a tutti!
Stex
Inviato da 
www.mynewsgate.net

 DIV) appaiano attraverso un effetto "fade-in".
Ok, guarda nu op' come te l'ho modificato, mi sembra un po' meglio, pero' ho potuto provarlo solo su IE6 e MZ1.5 (e OP7.21)...
<script type="text/javascript" language="JavaScript">
function flashDiv(nomeDiv,nDiv,op,br)
{
    if(typeof op=='undefined'){
        myDiv=document.getElementById(nomeDiv+nDiv);
        if(!myDiv)//op if(nDiv>3||!br)
            return;
        op=0;
        br=(typeof myDiv.style.filter!='undefined')?'F':(typeof myDiv.style.MozOpacity!='undefined')?'MO':null;
    }
    if(op<100){
        if(br=='F')
            myDiv.style.filter="Alpha(Opacity="+op+")";
        else if(br=='MO')
            myDiv.style.MozOpacity=op/100;
        op+=10;
        setTimeout("flashDiv('"+nomeDiv+"',"+nDiv+","+op+",'"+br+"')",50);
    }
    else
        setTimeout("flashDiv('"+nomeDiv+"',"+ ++nDiv+")",100);
}
</script>
</head>
<body onload="flashDiv('flash',1)">
soprattutto guarda i thread passati che mi sembra ci siano alcune cose interessanti:
http://groups.google.it/groups?th=2bb96470953d8e4
http://groups.google.it/groups?th=2fcc6cb2cb4dfe50
http://groups.google.it/groups?q=fade&meta=group%3Dit.comp.lang.javascript
http://groups.google.it/groups?q=opacit%E0&meta=group%3Dit.comp.lang.javascript

C'e' un errore nel commento seguente:
        if(!myDiv)//op if(nDiv>3||!br)
            return;
devi mettere:
        if(!myDiv)//op if(nDiv>3)
            return;

 
Inviato da 
www.mynewsgate.net