Efecto transision

pato12 · #1 (**permalink**) 13/09/2008, 23:17

Hola,
Trato de hacer un efecto de transision para un div.
Pero el codigo no anda y me tilda la pc:

Código HTML:

<script>
var r=0;
var s=10;
var f=60;
var p=0;
function ver(){
var e= document.getElementById("fondo");
e.style.visibility="visible";
e.style.filter='alpha(opacity="'+r+'")';
if(r<f){
r=r+s;
abrir=window.setInterval("ver();",50);
}else{
window.clearInterval(abrir);
abrir=0;
}
}
function cerrar(){
var e= document.getElementById("fondo");
e.style.filter='alpha(opacity="'+r+'")';
if(r>0){
r=r-s;
salir=window.setInterval("cerrar();",50);
}else{
window.clearInterval(salir);
salir=0;
e.style.visibility="hidden";
}
}
</script>
<style type="text/css">
<!--
#fondo {
	position:absolute;
	left:1px;
	top:1px;
	width:100%;
	visibility:hidden;
	height:100%;
	z-index:2;
	filter:alpha(opacity="0");
	background-color: #000000;
}
-->
</style><a href="#top" onClick="ver();">Ver</a>
<div id="fondo" title="Cilc aqui para cerrar" onclick="cerrar();"></div>

Gracias
Salu2

Panino5001 · #2 (**permalink**) 14/09/2008, 07:28

Probá así:

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 _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.test++;
        document.getElementById("log").innerHTML=_this.test;
        _this.val=_this.val+_this.pasos;
        set_opacity(_this, _this.val);
    },this.pausa);
}
function ver(){
    var obj=document.getElementById("fondo")
    obj.style.visibility='visible';
    transicion.call(obj,0,1,3);
}
function cerrar(){
    var obj=document.getElementById("fondo")
    transicion.call(obj,1,0,3);
}
</script>
</head>

<body>
<a href="#top" onclick="ver();">Ver</a>
<div id="fondo" style="background-color:#FF0000; width:100px; visibility:hidden; cursor:pointer;" onclick="cerrar();">EJEMPLO</div>
<div id="log"></div>
</body>
</html>

pato12 · #3 (**permalink**) 14/09/2008, 14:17

Hola,
Muchas gracias.
¿Pero como ago para que se vuelva a ocultar después de que se termine de desvanecer?
Intento con:

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>
var r;
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 _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.test++;
        r=_this.test;
        if(_this.test<100)
        document.getElementById("log").innerHTML=_this.test+"% cargado";
        else
        document.getElementById("log").innerHTML="Carga completada";
        _this.val=_this.val+_this.pasos;
        set_opacity(_this, _this.val);
    },this.pausa);
}
function ver(){
    var obj=document.getElementById("fondo")
    obj.style.visibility='visible';
    transicion.call(obj,0,1,3);
}
function cerrar(){
if(r==100){
    var obj=document.getElementById("fondo")
    if(r>=100)
    obj.style.visibility='hidden';
    transicion.call(obj,1,0,3);
}
}
</script>
</head>

<body>
<a href="#top" onclick="ver();">Ver</a>
<div id="fondo" style="background-color:#000000; color:#FFFFFF; width:100px; visibility:hidden; cursor:pointer;" onclick="cerrar();">EJEMPLO</div>
<div id="log"></div>
</body>
</html>

Gracias
Salu2

Panino5001 · #4 (**permalink**) 14/09/2008, 15:32

No sé bien a qué te referís con ocultar. Si es al estilo display, sería así:

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 _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.test++; 
        document.getElementById("log").innerHTML=_this.test; 
        _this.val=_this.val+_this.pasos; 
//cambiamos esto: 
        if(_this.val<=.01)  
            _this.style.display='none'; 
        else 
            _this.style.display='block'; 
        set_opacity(_this, _this.val); 
    },this.pausa); 
} 
function ver(){ 
    var obj=document.getElementById("fondo"); 
    transicion.call(obj,0,1,3); 
} 
function cerrar(){ 
    var obj=document.getElementById("fondo"); 
    transicion.call(obj,1,0,3); 
} 
</script> 
</head> 
 
<body> 
<a href="#top" onclick="ver();">Ver</a> 
<div id="fondo" style="background-color:#FF0000; width:100px; display:none; cursor:pointer;" onclick="cerrar();">EJEMPLO</div> 
<div id="log"></div> 
</body> 
</html>

pato12 · #5 (**permalink**) 14/09/2008, 17:18

Hola,
Es justo lo que estaba buscando.
Gracias
Salu2

Panino5001 · #6 (**permalink**) 14/09/2008, 18:57

Me alegra que te haya servido ;)