Llevo ya unos días investigando sobre la creación de efectos visuales para web por mí mismo, como transiciones, degradados, animaciones pequeñas y tal; sin usar JQuery para nada, ya que mi objetivo es saber hacer las cosas un tanto desde cero.
Resulta que ahora estoy intentando crear una función que haga desvanecerse cualquier contenedor u otro elemento de la página, pasándole a la misma funcion el ID del elemento en cuestión. El problema, es que al ser una función recursiva, pues empleo setTimeout dentro de la misma para llamarla, no es capaz de funcionar al pasarle el ID como parámetro, a pesar de haber empleado la sintaxis: setTimeout('funciónquesea(' +parámetro+ ')', milisegundos);
En cambio, si no paso parámetros a la función que tengo, a la que llamé fadeOut, funciona perfectamente. No soy capaz de encontrar el error.
Ahí va el código:
Código :
<!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=utf-8" />
<title>DHTML y CSS Avanzado | Efectos visuales</title>
<script language="javascript" type="text/javascript" src="arrays.js"></script>
<style>
a
{
font-weight: bold;
text-decoration: none;
outline: 0;
}
#enlace
{
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
<script language="JavaScript">
opacity = 100
function fadeOut(id)
{
opacity -= 1;
document.getElementById(id).style.opacity = opacity/100;
setTimeout('fadeOut('+id+')', 10);
}
</script>
</head>
<body>
<a href="javascript:fadeOut('enlace')">Desvanecer</a>
<div id="enlace"></div>
</body>
</html>
De antemano, gracias por la ayuda.
