Ciao Francesco,
ho scritto un semplice esempio che dissolve un elemento con opacity=1 e fa comparire un elemento con opacity=0.
- Dissolve.Add( id_name, step ); permette di "dissolvere" o "far comparire" l'elemento con id = idname.
Spero che l'esempio sia chiaro e di esser stato di aiuto.
Tony
codice:
<!DOCTYPE>
<html>
<head>
<style>
body { background-color:#FFD;}
div {
position:absolute;left:50%;top:50%;
text-align:center;
font:16px Arial;
}
</style>
<script>
function f_act_dissolve(){
Dissolve.Add("id_btn");
Dissolve.Add('id_home',0.05);
setTimeout("Dissolve.Add('id_tonenge');",1000); // dopo 1 secondo
}
//------------------------------------------------------------------------------
Dissolve={
act:0,
aidn:[],
tm:50,
ostep:0.03,
Add:function(idn,stp){
with(Dissolve){
if(!stp) stp=ostep;
var d,o,j=document.getElementById(idn);
o=parseInt(j.style.opacity);
if(!o) o=0;
d=(o>0.5)?-1:1;
aidn.push([j,o,d,stp]);
if(!act) { act=1; Cycle(); }
}},
Cycle:function(){
with(Dissolve){
var r,n=aidn.length;
if(!n) { act=0; return; }
for(r=0;r<n;r++) Dis(r);
for(r=n-1;r>=0;r--) if(!aidn[r].length) aidn.splice(r,1);
setTimeout(function(){ Cycle(); },tm);
}},
Dis:function(r){
with(Dissolve){
var D=aidn[r];
D[1] += (D[3]*D[2]);
if(D[1]<0) D[1]=0;
if(D[1]>1) D[1]=1;
D[0].style.opacity=D[1];
if(!D[1] || D[1]==1) aidn[r]=[];
}}
}
//------------------------------------------------------------------------------
</script>
</head>
<body>
<!-- div contenitore della Home page -->
<div id='id_home' style='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='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>
<div id='id_tonenge' style='top:10px;font:bold 24px Arial;width:300px;margin-left:-150px;color:#B00;opacity:0.0;'>Tonenge</div>
</body>
</html>