Salve a tutti, sto creando un js animano per gestire un menu ma ho riscontrato due problemi sulle animazioni:
1- le animazioni che vengono attivate con onmouseover ed onmouseout a volte sembra che funzionino contemporaneamente e dunque l'effetto è un qualcosa di tremolante.
2- quando, dopo aver aperto il menu con un click, tento di richiuderlo con un ulteriore click, questo finita l'animazione non esegue correttamente elem.style.display="none"; rimanendo visibile.
Posto il codice js dell'animazione attivata ONMOUSEOVER/OUT:
(la quale riscontra il tremolio come problema)
codice:
<script type="text/javascript" language="javascript" defer>
function animapri()
{
var stoppaChiudi=true;
var stoppaApri=false;
if(!stoppaApri)
{ dimm=document.getElementById('menu').style.width;
dimm=parseInt(dimm);
if(dimm<55)
{ document.getElementById('menu').style.width=dimm+3;
t=setTimeout("animapri()",35);
}
else {clearTimeout(t);}
}
}
</script>
<script type="text/javascript" language="javascript" defer>
function animchiudi()
{ var stoppaApri=true;
var stoppaChiudi=false;
if(!stoppaChiudi) {
dimm=document.getElementById('menu').style.width;
dimm=parseInt(dimm);
if(dimm>40)
{ document.getElementById('menu').style.width=dimm-1;
var t=setTimeout("animchiudi()",35);
}
else {clearTimeout(t);}
}
}
</script>
E qui sotto la parte che gestisce l'apertura del menu dopo il click:
(display none che non funziona)
codice:
<script type="text/javascript" language="javascript">
var aprChiud=false;
</script>
<script type="text/javascript" language="javascript" defer>
function apriChiudi()
{
aprChiud=!aprChiud;
if(aprChiud)
{
document.getElementById('schede').style.display="inline";
animaprischede();
}
else
{ animchiudischede(); }
}
function animaprischede()
{
dimm2=document.getElementById('schede').style.width;
dimm2=parseInt(dimm2); if(dimm2<150)
{ document.getElementById('schede').style.width=dimm2+10;
t=setTimeout("animaprischede()",35);
}
else
{clearTimeout(t);}
}
</script>
<script type="text/javascript" language="javascript" defer>
function animchiudischede()
{
dimm2=document.getElementById('schede').style.width;
dimm2=parseInt(dimm2);
if(dimm2>=0)
{
document.getElementById('schede').style.width=dimm2-10;
t=setTimeout("animchiudischede()",35);
}
else {
document.getElementById('schede').style.display = "none";
clearTimeout(t);
}
}
</script>
HELP! =)