Effetto "fade", ma non funziona....?!?

**Donovant** · 08-10-2008, 17:37

Il codice in javascript è questo:

Codice PHP:


function setOpa(obj,opa){

    // IE/Win

        obj.style.filter = "alpha(opacity:"+opa+")";

        // Safari<1.2, Konqueror

        obj.style.KHTMLOpacity = opa/100;

        // Older Mozilla and Firefox

        obj.style.MozOpacity = opa/100;

        // Safari 1.2, newer Firefox and Mozilla, CSS3

        obj.style.opacity = opa/100;

}



function opacitaIn(obj,opa){

    

    if(!document.getElementById) return;

    

    if(opa <= 100){

         setOpa(obj,opa);

         opa += 5;

         //window.setTimeout("opacitaIn('"+obj+"',"+opa+")", 1500);

         //window.setTimeout(opacitaIn(obj,opa), 1500);

    }

        

}

HTML:

Codice PHP:


<li id="mHome" class="kwick" onmouseover="opacitaIn(this,100);" onmouseout="opacitaOut(this,50);" >[url="#"]Home[/url]

CSS: nel css ho impostato l'opacità iniziale al 50%

Il problema è che anche attivo uno dei due "setTimeout", l'opacità cambia istantaneamente e non con effetto "fade" (crescente).
Grazie a tutti per il futuro aiuto

**Donovant** · 08-10-2008, 22:14

Aiutoooo?!?!?!!

**artorius** · 08-10-2008, 23:39

Prova a fare:

Codice PHP:


function setOpa(obj,opa){ 

    // IE/Win 

        obj.style.filter = "alpha(opacity:"+opa+")"; 

        // Safari<1.2, Konqueror 

        obj.style.KHTMLOpacity = opa/100; 

        // Older Mozilla and Firefox 

        obj.style.MozOpacity = opa/100; 

        // Safari 1.2, newer Firefox and Mozilla, CSS3 

        obj.style.opacity = opa/100; 

} 



function opacitaIn(){ 

     

    if(!document.getElementById) return; 

     

    if(opaC <= 100){ 

         setOpa(objE,opaC); 

         opaC += 5; 

    } 

    else

        clearInterval(interval);

         

}



var opaC, objE;

var interval;



function start(id){

   opaC = 50;

   objE = document.getElementById(id);

   interval = setInterval(opacitaIn, 500)

}

Basta che chiami start('mHome')

**whisher** · 09-10-2008, 00:09

Prova questa (da stato normale a fade):

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/JavaScript">

function setOpacity(el,value) { 

    el.style.opacity = value/10; 

    el.style.mozOpacity = value/10; 

    el.style.filter = 'alpha(opacity=' + value*10 + ')'; 

} 

function fade(el,stop){ 

    var opt= 10; 

   var timeoutID = window.setInterval(f, 100); 

    var self= el; 

    function f(){     

        if(opt>stop){ 

            opt--; 

            setOpacity(self,opt); 

        } 

        else { 

            window.clearTimeout(timeoutID); 

        } 

    } 

} 

</script>



</head>



<body>

<div id="myDiv" style="width:200px; height:200px; background-color:#0066FF" onClick="fade(this,'1')"></div>



</body>

</html>

**Donovant** · 09-10-2008, 00:50

Ho provato come "wisher" ma niente....

function opacitaIn(obj,opa){
/*document.getElementById("mHome").style.color="#aa aaaa";*/
if(!document.getElementById) return;

var timeId = window.setInterval(op(),300);
var ob = obj;
var alpha = opa;

function op(){
if(alpha < 100){
alpha += 5;
setOpa(ob,alpha);
}
else window.clearInterval(timeId);
}
//window.setTimeout("opacitaIn('"+obj+"',"+opa+")", 1500);
//setTimeout(opacitaIn(obj,opa), 300);
}

Il "setPoa()" l'ho lasciato nel mio modo che è cmq corretto.
Maah non capisco!

**Donovant** · 09-10-2008, 02:21

Risolto...avevo messo la parentesi "()" in setInterval(fade(),100); per la funzione fade()....mentre in set interval probabilmente per indicare la funzione si mette solo il nome.

Discussione: Effetto "fade", ma non funziona....?!?

Strumenti discussione

Ricerca discussione

Visualizza

Effetto "fade", ma non funziona....?!?

Permessi di invio