Hace unos días postee un aporte con una traducción y su explicación de algo que encontré por ahí sobre como hacer FadeIn en un div con un par de funciones de JavaScript, des pues de jugar un rato esto es lo que logré:
HTML
un div comun y corriente
Código :
<body> <div id="fading"> <h1>Cristalab</h1> </div>
CSS
algo de estilo para dicho div:
Código :
#fading {
width:300px;
height:75px;
border: medium solid #E70;
background:silver;
padding:10px;
font-family: verdana;
color:#EEE;
text-align:center;
letter-spacing:5px;
}JavaScript
el codigo es bastante sencillo, en primer lugar declaramos un par de variables
Código :
var time; var transparency = 0;
ahora vamos con la funcion propiamente dicha:
Código :
function fadeIn() {
//
//incrementamos el valor
transparency += 5;
//si termino la trnsicion borramos el intervalo
transparency = (transparency == 100) ? clearInterval(time) : transparency;
//seteamos al div como objeto para poder usarlo
obj = document.getElementById('fading');
//programamos cada navegador por separado
if (document.all){
//esto es para IE, como siempre hay q programarlo a parte
obj.style.filter = 'alpha(opacity='+transparency+')';
}else{
// Safari 1.2, posterior Firefox y Mozilla, CSS3
obj.style.opacity = transparency /100;
// anteriores Mozilla y Firefox
obj.style.MozOpacity = transparency /100;
// Safari anterior a 1.2, Konqueror
obj.style.KHTMLOpacity = transparency /100;
}
};
y luego en el evento onLoad de la pagina, llamamos a la función fadeIn() cada 100 milisegundos:
Código :
window.onload = function() {
//
time = setInterval('fadeIn()',100);
};
bastante sencillo, no les parece? aqui hay un ejemplo funcionando
//
este es el ejemplo del codigo
//
Por Señor Muñoz el 05 de Abril de 2008
Señor Muñoz_blog :
No uses internet explorer
CarlosRuminott :
Señor Muñoz_blog :
No uses internet explorer
en IE tambien se ve, solo q tiene un bug al principio, pero se ve ...a ver si lo arreglo.
Código :
<script type="text/javascript"> document.write("<style type='text/css'>#fading {visibility:hidden;}</style>") // var time; var transparency = 0; // function fadeIn() { // transparency += 5; // transparency = (transparency == 100) ? clearInterval(time) : transparency; // obj = document.getElementById('fading'); obj.style.visibility = 'visible'; if (document.all){ //esto es para IE, como siempre hay q programarlo a parte obj.style.filter = 'alpha(opacity='+transparency+')'; }else{ // Safari 1.2, posterior Firefox y Mozilla, CSS3 obj.style.opacity = transparency /100; // anteriores Mozilla y Firefox obj.style.MozOpacity = transparency /100; // Safari anterior a 1.2, Konqueror obj.style.KHTMLOpacity = transparency /100; } }; // window.onload = function() { // time = setInterval('fadeIn()',100); }; </script>Por marcosFernandez el 06 de Abril de 2008
Me gustaría aportar mi pequeño granito de arena.
Yo este tipo de efecto en vez de hacerlo con este código lo haría directamente utilizando la librería jQuery. Con ello, nos aseguraremos que el correcto funcionamiento en los navegadores actuales sin ningún tipo de problema.
Después de la inclusión del fichero jQuery.js, realizar este efecto sería tan sencillo como:
<pre>
$('#nombreId').fadeIn('normal');
</pre>
Dónde nombreId es el id del objeto al cual queremos hacer un fadeIn.
Si queremos hacer por ejemplo que una imagen hace un fadeOut, cargamos otra imágen y luego hacemos un fadeIn, sería tan sencillo como:
<pre>
$('#nombreId').fadeOut('normal',function(){
$(this).attr('src','nuevaFoto.jpg');
});
$('#nombreId').fadeIn('normal');
</pre>
El parámetro normal hace referencia a la velocidad del efecto. También se puede poner un valor numérico entre 0.1 y 1.
Por marcosFernandez el 06 de Abril de 2008
Por ChickenExecutor el 06 de Abril de 2008
Por ejemplo cuando la opacidad llegue al 100%.
Esta divertido el efecto.
Aunque es cierto que usando algun framework javascript, como jQuery (o cualquier otro) se consigue con muy poco codigo. Creo que habría que apuntar que, si sólo vamos a usar este pequeño efecto, el tamaño de la librería completa podría comprometer el tiempo de carga de la página. Así que es mejor escribir nuestra propia función.
Por bipsa el 06 de Abril de 2008
Código :
porque, si recuerdo bien es lo mismo que:
if(transparency == 100)
transparency = clearInterval(time)
else
transparency = transparency
Por scoffil el 18 de Junio de 2008
Por Scoffil el 18 de Junio de 2008
Por j4rk0r el 25 de Marzo de 2010
document.write("<style type='text/css'>#fading {visibility:hidden;}</style>")
¿Como se soluciona este fallo?
Gracias
Notifico que la pagina del ejemplo está caída.