Animazione: trasparenza graduale

[duri93]

Salve a tutti
Da poco mi sono messo ad imparare javascript, e in particolare volevo fare un menu a tendina dove la tendina compare non di colpo (cambiando display da 'none' a 'block'), ma in modo che facesse una comparsa graduale cambiando la trasparenza.
Ma lo script non funziona... non so perchè...

Prima faceva una cosa strana che ora non mi ricordo, ora proprio non parte, non fa neanche il primo alert che ho messo...

Ora posto il codice

Stile (Non penso sia importante, ma lo posto lo stesso):

<style>
#Contenitore{
    position:relative;
}
#Bottone{
    background-color:#000099;
    color:#FFFFFF;
    font-weight:bold;
    width:100px;
    height:30px;
    text-align:center;
}
#Tendina{
    background-color:#003300;
    color:#FFFFFF;
    font-weight:bold;
    width:150px;
    height:200px;
    position:relative;
    left:10px;
}
</style> 

Script:

function tendina(bo){
        var tendina = document.getElementById('Tendina');  //Prendo l'oggetto tendina
        alert ('Parto'); 
        if(tendina.style.display=='none'){ //Se non è visibile
            tendina.style.display='block'; //Diventa visibile
            alpha = 0; //Con alpha 0
            quantita = 0.1; //Durante l'animazione alpha cambierà di 0.1
            tendina.style.opacity = alpha; //Applico alpha=0
            alert('Non visibile: lo metto visibile con alpha = '+alpha+'('+tendina.style.opacity+'); Incremento = '+quantita);
            }
        else{ //Se invece è visibile
            alpha = 1;
            tendina.style.opacity = alpha;
            quantita = -0.1;
            alert('Visibile: lo metto visibile con alpha = '+alpha+'('+tendina.style.opacity+'); Incremento = '+quantita);
        }
        cambia_alpha(alpha,quantita); //Chiamo cambia alpha
    }
function cambia_alpha(alpha,quantita){
    var tendina = document.getElementById('Tendina');
    alpha+=quantita; //Cambio alpha della quantità desiderata
    tendina.style.opacity = alpha; //Lo applico
    
    //A volte alpha diventa tipo 0.7000000000000000001, levo questo bug
    alpha=alpha*100; //Faccio diventare alpha intero
    alpha=parseInt(alpha); //Mi assicuro che sia intero
    alpha=alpha/100; //Ritorno alla notazione con 2 decimali
    
    alert('Cambio alpha = '+alpha+'('+tendina.style.opacity')' );
    
    if(alpha>0&&alpha<1){ //Se alpha è compreso tra 0 e 1
    setTimeout(cambia_alpha(alpha,quantita),200); //Richiamo questa funzione
        alert('Richiamo'+alpha+'('+tendina.style.opacity+')');
    }else  //Senno basta
        alert('Basta');
} 

Pagina:

<div id="Contenitore">
    <div id="Bottone" onClick="tendina()">Bottone</div>
    <div id="Tendina">Contenuto della tendina</div>
</div> 

Non uso IE e non mi interessa esserne compatibile, almeno per ora

Grazie per la pazienza e la comprensione di una mente contorta come la mia...

[duri93]

Ho risolto un paio di errori: prima di tutto la funzione la faccio diventare f_tendina per evitare un uso doppio del nome, poi in un alert manca un + tra due stringhe...

Con firebug però ho scoperto che alla fine mi da questo errore:
useless setTimeout call (missing quotes around arguments?)
Che significa? che ho chiamato un setTimeout senza passargli parametri?? e dove?

Spero che qualcuno riesca ad aiutarmi...
Grazie

[duri93]

Risolto anche quello...
Ora però viene al pettine un problema fondamentale:
con gli alert tutto funziona perfettamente, senza invece la tendina sparisce di colpo, senza neanche aspettare il tempo dei timeout....

Help please

[Xinod]

fai, come minimo, cosi'
setTimeout("cambia_alpha("+alpha+","+quantita+")", 200); //Richiamo questa funzione

[duri93]

Perfetto... Tutta colpa di quelle virgolette...
Ogni volta che mi incastro su cavolate del genere

Grazie mille, ora funziona in modo impeccabile

[duri93]

Ho provato a cambiarlo per fare in modo di passargli l'id dell'oggetto, così:

    function toggle_visibility(idx){
        var oggetto = document.getElementById(idx);
        alert ('Parto'); 
        if(oggetto.style.display == 'none'){
            oggetto.style.display = 'block';
            alpha = 0;
            quantita = 0.05;
            oggetto.style.opacity = alpha;
            alert('Non visibile: lo metto visibile con alpha = '+alpha+'('+oggetto.style.opacity+'); Incremento = '+quantita);
            }
        else{
            alpha = 1;
            oggetto.style.opacity = alpha;
            quantita = -0.05;
            alert('Visibile: lo metto visibile con alpha = '+alpha+'('+oggetto.style.opacity+'); Incremento = '+quantita);
        }
        cambia_alpha(alpha,quantita,idx);
    }
    function cambia_alpha(alpha,quantita,idx){
        var oggetto = document.getElementById(idx);

        alpha+=quantita; //Si ferma qui
        oggetto.style.opacity = alpha;

        alpha=alpha*100;
        alpha=parseInt(alpha);
        alpha=alpha/100;
        
        alert('Cambio alpha = '+alpha+'('+oggetto.style.opacity+')');
        
        if(alpha>0&&alpha<1){
            setTimeout("cambia_alpha("+alpha+","+quantita+","+idx+")",200);
        }else{
            if(alpha==0)
                oggetto.style.display = 'none';
            alert('Basta');
        }
    } 

Noterete che ho rinominato la prima funzione... Comunque succede questo:
Esegue toggle_visibility()
Esegue cambia_alpha()
La riesegue e si ferma dove chè il commento.

Per me è inspiegabile, magari per voi è una cavolata...
GRAZIE ANCORA

[duri93]

Non voglio scrivere molti messaggi di fila, ma ho scoperto l'errore:
nella riga "oggetto.style.opacity = alpha;" secondo i browser oggetto è null, e per questo si blocca

Trovato il problema, ora bisogna risolverlo, e chiedo a voi come

GRAZIE

[homezappa]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>test</title>
<style>
#Contenitore{
    position:relative;
}
#Bottone{
    background-color:#000099;
    color:#FFFFFF;
    font-weight:bold;
    width:100px;
    height:30px;
    text-align:center;
}
#Tendina{
    background-color:#003300;
    color:#FFFFFF;
    font-weight:bold;
    width:150px;
    height:200px;
    position:relative;
    left:10px;
}
</style>
    <script type="text/javascript"> 
    function toggle_visibility(idx){
        var oggetto = document.getElementById(idx);
        //alert ('Parto');
        if(oggetto.style.display == 'none'){
            oggetto.style.display = 'block';
            alpha = 0;
            quantita = 0.05;
            oggetto.style.opacity = alpha;
            //alert('Non visibile: lo metto visibile con alpha = '+alpha+'('+oggetto.style.opacity+'); Incremento = '+quantita);
            }
        else{
            alpha = 1;
            oggetto.style.opacity = alpha;
            quantita = -0.05;
            //alert('Visibile: lo metto visibile con alpha = '+alpha+'('+oggetto.style.opacity+'); Incremento = '+quantita);
        }
        cambia_alpha(alpha,quantita,idx);
    }

    function cambia_alpha(alpha,quantita,idx){
        var oggetto = document.getElementById(idx);

        alpha+=quantita; //Si ferma qui
        oggetto.style.opacity = alpha;

        alpha=alpha*100;
        alpha=parseInt(alpha);
        alpha=alpha/100;
        
        //alert('Cambio alpha = '+alpha+'('+oggetto.style.opacity+')');
        
        if(alpha>0&&alpha<1){
            setTimeout(function(){cambia_alpha(alpha,quantita,idx);},200);
        }else{
            if(alpha==0)
                oggetto.style.display = 'none';
           // alert('Basta');
        }
    }   
    
    </script>
  </head>

  <body>
<div id="Contenitore">
    <div id="Bottone" onClick="toggle_visibility('Tendina');">Bottone</div>
    <div id="Tendina">Contenuto della tendina</div>
</div>  </body>
</html> 

Tolti tutti gli alert.
Funziona, con Firefox, anche se io metterei un timeout minore per rendere più 'fluido' l'effetto.
Con timeout a 30 msec e quantita a 0.02 l'effetto non è affatto male!
Il problema ? Nota la differenza nella setTimeout!

Eh Eh

HTH
Zappa

[duri93]

Il timeout era messo a caso, devo ancora metterlo a posto, mi bastava che funzionasse lo script... GRAZIE MILLE