Vida en la Luna

Con Jquery puedes personalizar los efectos como quieras. Sus efectos se basan en cambios del CSS de los objetos. Por ejemplo, puedes variar la dimensión de una imagen de 100px a 400px. En vez de hacerse un cambio de golpe se hará progresivamente en el tiempo que tu indiques. Estos efectos quedan muy bien visualmente.

Te hemos preparado varios ejemplos en esta página.

Ejemplo 1 – Opacidad imagen

En este efecto puedes ver la transición de dos imágenes. Para ello, necesitamos dos imágenes superpuestas. Una encima de la otra. Al pasar por encima variamos la opacidad de la que queda por encima y así vemos la imagen de abajo.

El código HTML del ejemplo:

<div style=”height: 320px;” >
<div style=”position: relative; margin: 20px;”>
<div style=”width: 400px; height: 300px; position:absolute; top:0; left: 0;”>
<img src=”paisaje.jpg” width=”400″ height=”300″/>
</div>
<div style=”width: 400px; height: 300px; position:absolute; top:0; left: 0;”>
<img src=”paisaje_bn.jpg” width=”400″ height=”300″/>
</div>
</div>

El código js:

<script type=”text/javascript”>
$(“.img_bn”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ opacity: 0.0 }, 500 );
});
$(“.img_bn”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ opacity: 1 }, 500 );
});
</script>

Como puedes ver asociamos los eventos mouseenter y mouseleave a dos funciones que varían la opacidad de la imagen a 0 o 1. Para ello llamamos a la función animate pasando los cambios que queramos aplicar al CSS y el tiempo en milisegundos que ha de tardar el efecto.

La función stop() sirve para parar todos los efectos que están en marcha sobre uno o varios objetos.

Ejemplo 2 – Tamaño de imagen

En este ejemplo aplicamos un cambio de tamaño a la imagen. Para ello el código js es:

<script type=”text/javascript”>
$(“#ej_img”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ height: 300, width: 400 }, 500 );
});
$(“#ej_img”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ height: 150, width: 200 }, 500 );
});
</script>

Ejemplo 3 – Tamaño de texto

Aquí puedes ver como variamos el tamaño de la fuente del texto. El código js es:

<script type=”text/javascript”>
$(“#ej3_p”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ fontSize: 20 }, 500 );
});
$(“#ej3_p”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ fontSize: 10 }, 500 );
});
</script>

Ejemplo 4 – Varios efectos en uno

Podemos hacer que se ejecuten varios efectos. Uno después del otro. Para ello solo iremos concatenando los efectos. En el ejemplo el código js es:

<script type=”text/javascript”>
$(“#ej4_div”).bind( “click”, function(e)
{
$(this).animate({ left: 150 }, 500 )
.animate({ top:50, left:200 }, 250 )
.animate({ top:0, left: 250 }, 1500 )
.animate({ left: 400 }, 500 )
.animate({ top: 400 }, 500 )
.animate({ left: 200 }, 500 )
.animate({ top: 0, left: 0 }, 500 );
});
</script>