Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    19

    Javascript per menu dinamico

    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! =)

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    19
    Bene ragazzi, ho risolto da solo:

    Per quanto riguarda il tremolio, ho inserito una variabile generica di controllo che viene messa a true o false a seconda che sia in esecuzione l'animazione di apertura del menu o di chiusura.

    Alle funzioni delle animazioni ho aggiunto un if(variabile di controllo) [od eventualmente if(!variabile di controllo) ed il gioco è fatto.

    Per quanto riguarda il fatto che il display="none" non funzionava, ho scoperto che l'animazione non concludeva il ciclo e non raggiungeva mai l'else:

    codice:
    function animchiudischede()
     {
     dimm2=document.getElementById('schede').style.width; 
    dimm2=parseInt(dimm2); 
    if(dimm2>=0)   cambiando il >=0 in >20 funziona correttamente 
    { 
    document.getElementById('schede').style.width=dimm2-10; 
    t=setTimeout("animchiudischede()",35); 
    } 
    else {
     document.getElementById('schede').style.display = "none"; 
    clearTimeout(t); 
    }
     }

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    19
    Originariamente inviato da zemy
    Bene ragazzi, ho risolto da solo:
    =D Grazie zemy!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.