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 ;)