Alpha unos segundos

salbatore · #1 (**permalink**) 25/08/2008, 11:39

Hola, foreros:

He buscado una funcion para que aparezca un div unos segundos, pero no la he encontrado, jeje... y si he encontrado algo parecido a sido demasido complejo.

¿Como puedo hacer que un div aparezca unos segundos con alpha 0 al iniciarse, 100 en su maximo y 0 al finalizar?

Panino5001 · #2 (**permalink**) 25/08/2008, 20:55

Fijate si te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script>

function set_opacity(div, val) {
  if (typeof div.filters!='undefined') {
    val *= 100;
    try {
      div.filters.item("DXImageTransform.Microsoft.Alpha").opacity = val;
    } catch (e) { 
     div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
    }
  } else {
    div.style.opacity = val;
    div.style.MozOpacity = val; 
  }
} 
var transicion=function(inicio,fin,segundos){
    var val=inicio+.0001;
    set_opacity(this, val);
    this.pasos=(fin-inicio)/100;
        this.pausa=segundos*10;
    var _this=this;
    this.intervalo=setInterval(
    function(){
        if(val>=fin){
            clearInterval(_this.intervalo);
            _this.intervalo=null;
        }
        val=val+_this.pasos;
        set_opacity(_this, val);
    },this.pausa);
}
window.onload=function(){
    var obj=document.getElementById('pp');
    transicion.call(obj,0,1,5);
}
</script>
</head>

<body>
<div id="pp" style="background-color:#FF0000; width:100px;">EJEMPLO</div>
</body>
</html>

salbatore · #3 (**permalink**) 26/08/2008, 20:45

Hola,

Muchas gracias... es justo lo que estaba buscando...

Gracias de nuevo... jeje... soy feliz...

salbatore · #4 (**permalink**) 05/10/2008, 17:23

Hola, Panino5001,

Se que va a sonar a novato e inutil total, jeje... Pero he intentado que la funcion que me das envede mostrar un div lo oculte, pero no lo consigo por ninguna forma, jeje...

¿Me puedes ayudar a hacer que la funcion oculte?, si es posible con la misma, jeje... que esta guapisima... jeje.

Panino5001 · #5 (**permalink**) 05/10/2008, 20:29

Mejor usar algo así tanto para aparecer como para desaparecer:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script>

function set_opacity(div, value) {
    div.style.opacity = value;
    div.style.MozOpacity = value;
    div.style.KhtmlOpacity = value;
    div.style.filter = 'alpha(opacity=' + value*100 + ')';
    div.style.zoom=1;//necesario para Explorer
}
var transicion=function(inicio,fin,segundos,callback){
    var _this=this;
    this.test=0;
    if(_this.intervalo)clearInterval(_this.intervalo);
    if(this.val && Math.abs(fin-_this.val)<0.01)return;
    this.val=!this.val?inicio<1?inicio+.0001:inicio:this.val;
    set_opacity(this, this.val);
    this.pasos=(fin-inicio)/100;
    this.pausa=segundos*10;
    this.intervalo=setInterval(
    function(){
        if(_this.test>99 || Math.abs(fin-_this.val)<0.01){
          clearInterval(_this.intervalo);
          _this.val=fin;
           set_opacity(_this, _this.val);
           if(typeof callback=='function')
           callback();
        }
        _this.test++;
        document.getElementById('log').innerHTML=_this.test;
        _this.val=_this.val+_this.pasos;
        set_opacity(_this, _this.val);
    },this.pausa);
} 
window.onload=function(){
    var obj=document.getElementById('pp');
    /*ejemplo si se quiere llamar a otra función después
    transicion.call(obj,1,0,5,function(){transicion.call(obj,0,1,5);});
    ó
    transicion.call(obj,1,0,5,function(){obj.style.display='none';});
    */
    transicion.call(obj,1,0,5);
}
</script>
</head>

<body>
<div id="pp" style="background-color:#FF0000; width:100px;">EJEMPLO</div>
<div id="log"></div>

</body>
</html>

salbatore · #6 (**permalink**) 05/10/2008, 22:54

Hola, Panino5001,

Buff... que gusto ver estas respuestas... muchisimas gracias!!

Funciona fenomenal!

Panino5001 · #7 (**permalink**) 05/10/2008, 23:00

Me alegra que te sirva