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>

Como siempre, puedes ver los ejemplos en funcionamiento en una página a parte. Pulsa este enlace si quieres verlos.

Ejemplo 1 – Mostrar / Ocultar

En este ejemplo puedes ver como se muestran y ocultan unos divs. El efecto hace que se oculten y muestren por el borde superior izquierdo. Para ello estamos utilizando el código:

• $(‘.div_ejemplo1′).show(“5″): Muestra todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).hide(“5″): Oculta todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).toggle(“5″): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Como ves, utilizamos los selectores que os explicamos en el post Jquery, escribe menos, haz más. Por lo tanto los efectos se pueden aplicar sobre un solo objeto, sobre varios, todos los de la misma clase…

Ejemplo 2 – Deslizar

Este ejemplo es similar al anterior pero el efecto muestra y oculta los divs deslizandolos a la parte superior. Utilizamos el código:

• $(‘.div_ejemplo2′).slideDown(): Muestra todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideUp(): Oculta todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideToggle(): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Ejemplo 3 – Opacidad

Este ejemplo utiliza la opacidad de los divs para crear el efecto. El código:

• $(‘.div_ejemplo3′).fadeIn(): Muestra todos los objetos de la clase div_ejemplo3.
• $(‘.div_ejemplo3′).fadeOut(): Oculta todos los objetos de la clase div_ejemplo3.

Ejemplo 4

En este ejemplo puedes ver como los efectos no solo funcionan sobre divs. Aquí los utilizamos con un párrafo y con un enlace.