Siguiendo con el framework de javascript jQuery, aprovecho para mostrar otro ejemplo. Ésta vez he combinado el efecto FadeTo con php, para así generar un listado dinámico (por ejemplo extraido de base de datos). El efecto FadeTo nos permite elegir (entre otras cosas) qué nivel queremos de opacidad (de 0 a 1) y podemos hacer el efecto hacia FadeIn o hacia FadeOut.
1.Cabecera de javascript. Como otros posts, recomiendo la de google aps, me parece la más rápida al cargarse.
2.Código HTML + PHP. Aquí generamos el código y incremetamos las variables que nos servirán para saber la cantidad de elementos en los que queremos aplicar el efecto.
<?
$cont = 0;
while ($cont < $total_elementos) {
?><?
$cont++;
}
?>
3.Código javascript del documento. Hacemos un bucle de todos los elementos que mostramos y en los que deseamos aplicar el efecto. Si hacemos una llamada a una base de datos, dicho código lo situamos antes del tag </body> para así dar tiempo a que se incremente la variable $num_projects
$('#el_0').mouseover(function() {
$('#el_0').fadeTo("fast", 0.3);
});
$('#el_0').mouseleave(function() {
$('#el_0').fadeTo("fast", 1);
});
4.Por último los css.
#main {
position: relative;
background-color:#1D1D1D;
}
#main ul{
position:relative;
left:50px;
width: 90%;
}
#main ul li {
position:relative;
list-style:none;
float:left;
margin-right:10px;
border: 1px #fff solid;
width: 150px;
height: 150px;
margin-bottom: 10px;
vertical-align: middle;
background-color: #000066;
}
Espero que os sirva a alguién almenos para algún proyecto que hagáis. A mi me ha ido bastante bién. De hecho, así no utilizo los estilos "opacity" o "filter" que siempre me dan problemas a la hora de validar los estilos de una web (Es lo que nos toca mientras esperamos que todos los navegadores acepten Css 3). He juntado los estilos para tenerlo todo en un archivo. Será mas cómodo por si alguién quiere descargárselo:
