Problema con un codigo para efecto fade

nicolaslt · #1 (**permalink**) 29/12/2009, 11:41

Hola que tal?

Bueno, les cuento, que tengo un código en javascript para realizar un efecto fade.

La base me la bajé de un post de este foro , pero lo modifiqué un poco para adaptarlo a mis necesidades :D

Bueno, el .js sería el siguiente:

Código:

var tempo;
var opa = 0;
function displayed()
{
	obj = document.getElementById('login');

	var displayed;
	if(opa==100)
	{
		displayed = 1;
	}
	else if(opa==0)
	{
		displayed=0;
	}
	else
	{
		displayed = 2;
	}
	return displayed;
}
function ver() {

  opa+=10;
  obj = document.getElementById('login');
  obj.style.display='';
  if (document.all)
    obj.style.filter = 'alpha(opacity='+opa+')';
  else
    obj.style.MozOpacity = opa/100; 
    if (opa==100)
	{
		clearInterval(tempo);
	}
}
function ocultar()
{
  opa-=10;
  obj = document.getElementById('login');
  if (document.all)
    obj.style.filter = 'alpha(opacity='+opa+')';
  else
    obj.style.MozOpacity = opa/100; 
    if (opa==0)
	{
		obj.style.display='none';
		clearInterval(tempo);
	}
}

Y este el html que lo llama:

Código HTML:

<a style="font-size:19px;font-weight:bold;" href="#" onclick="if(displayed()==0)tempo=setInterval('ver()',1)
else if(displayed()==1)
tempo=setInterval('ocultar()',1)">IDENTIFICATE</a>

<div id="login"  style="text-align:center; z-index:10; background-image:url(http://nan.webatu.com/images/bk-register.png); color:#FFFFFF; font:bold; z-index:10;position:fixed; width: 543px; height: 317px; left: 141px; top: 163px;filter:alpha(opacity=0); -moz-opacity:0;Opacity:0;" >
HOLAA
</div>

Bueno, el tema, es que el fade me funca perfecto en firefox e ie, pero no en google chrome y opera (son los 4 que probé)

Esperaba que me ayuden a ver el porqué :)

saludos y gracias desde ya

okhosting · #2 (**permalink**) 29/12/2009, 11:57

Checa este framework esta excelente y es compatible con todos los navegadores

http://gaiaware.net/

okhosting · #3 (**permalink**) 29/12/2009, 11:58

Ademas es open source :)

tambien peudes buscar el api de ajax de google en code.google.com

zerokilled · #4 (**permalink**) 29/12/2009, 12:02

el problema es la propiedad MozOpacity, es explicitamente para mozilla. cambialo por opacity.

nicolaslt · #5 (**permalink**) 29/12/2009, 21:28

Joya, gracias a los dos, por ahora uso opacity, despues me fijo el opensource que me dejaste okhosting

saludos!!!