Efectos rápidos con jQuery

  • Por
Algunos efectos dinámicos se pueden hacer con jQuery con rapidez impactante y extremadamente poco código Javascript.
Una de las ventajas más destacadas de jQuery es la realización de efectos especiales para páginas web, que se desarrollan rápido y con poco código fuente. Estos efectos sirven para aplicar dinamismo a una página web y una respuesta atractiva frente la interacción con el usuario, lo que hace que las páginas programadas con jQuery ofrezcan una imagen puntera.

Los efectos con jQuery, al menos un buen puñado de ellos, se pueden realizar sin muchas complicaciones, ya que existen unas funciones que simplifican la tarea de los desarrolladores (Ver la librería Effects). En muchos casos conseguir un efecto nos llevará una línea de código en nuestro programa, como esta:

$("#capaefectos").hide("slow");

Con esto conseguimos que el elemento con id="capaefectos" desaparezca de la página. Pero además, el efecto no es un simple fundido del elemento en la página (hacerse transparente), sino que también va acompañado de una reducción de tamaño progresiva hasta desaparecer.

Combinando los efectos con la interacción de usuario, por medio de eventos, podemos conseguir que los efectos respondan a las acciones del visitante, lo que multiplica las posibilidades, manteniendo la sencillez, elegancia y facilidad de manutención del código Javascript. Lo vamos a ver en un ejemplo a continuación.

Ejemplo de efectos e interacción en jQuery

En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. Vamos a implementar un simple efecto de ocultar y mostrar un elemento de la página web.

Podemos ver el ejemplo en marcha en una página aparte.

Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos que al pulsar los enlaces se oculte y se muestre la capa, con las funciones de la librería Effects.

Para comenzar, este es el código HTML del ejemplo, que comprende tanto la capa como los enlaces.

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las funciones de Effects, que harán que se muestre y oculte la capa.

El código Javascript, que hace uso de jQuery sería el siguiente:

$(document).ready(function(){
   $("#ocultar").click(function(event){
    event.preventDefault();
    $("#capaefectos").hide("slow");
   });

   $("#mostrar").click(function(event){
    event.preventDefault();
    $("#capaefectos").show(3000);
   });
});

Como se puede ver, primero tenemos que definir el evento ready del objeto $(document), para hacer cosas cuando el documento está preparado para recibir acciones.

Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el método click sobre el enlace, que hemos seleccionado con jQuery a través del identificador de la etiqueta A.

$("#ocultar").click(function(event){

Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".

Nota: leer el artículo anterior Pasos para utilizar jQuery en tu página web, en el que hablábamos sobre eventos y otras generalidades de este framework Javascript. Podremos encontrar explicaciones más detalladas sobre cómo definir eventos Javascript con jQuery.

Dentro de la función a ejecutar cuando se hace clic, se coloca la llamada a la función de los efectos.

$("#capaefectos").hide("slow");

Esto hace que nuestra capa, a la que habíamos puesto el identificador (atributo id) "capaefectos", se oculte. Pasamos el parámetro "slow" porque queremos que el efecto sea lento.

Ahora veamos la función de los efectos con otra llamada:

$("#capaefectos").show(3000);

Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse dure 3000 milisegundos.

No hay más complicaciones, así que si habéis entendido esto ya sabéis hacer efectos simples pero atractivos con jQuery en vuestra página web. Ahora podréis ver el código completo de este ejemplo creado por DesarrolloWeb.com para demostrar el uso de efectos.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <title>Efectos con jQuery</title>
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#ocultar").click(function(event){
    event.preventDefault();
    $("#capaefectos").hide("slow");
   });

   $("#mostrar").click(function(event){
    event.preventDefault();
    $("#capaefectos").show(3000);
   });
});
</script>
</head>

<body>

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

</body>
</html>

Por último, pongo el enlace de nuevo al ejemplo en marcha.

Como se ha podido comprobar, hacer efectos con jQuery es bastante sencillo. Claro que hay otros detalles importantes y otros tipos de efectos y funcionalidades de personalización de los mismos, pero esto nos ha servido para demostrar lo sencillo que es trabajar con este framework Javascript. En siguientes artículos seguiremos explorando casos de uso típicos de jQuery.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

juan_carlos_garcia-98941

19/5/2009
preventDefault
Me podria explicar que es esto ?
Alguien sabe adonde puedo encontrar información completa en espaniol sobre jquery ?
Y sobre todo como validar formularios, plugins en espaniol.
Gracias

Omar

19/5/2009
COmo hacer que la capa DIV inicie oculta?
espero me puedan dar este dato, que cuando abra la pagina el DIV este oculto y ya con la opcion de mostrar capa me despliege todo.

gracias

xavier

20/5/2009
excelente codigo
muy bueno, de hecho todo su sitio tiene cosas interesantirimas, pero creo yo que por facilidad a los usuarios, pienso yo se deberia adjuntar un zip con los archivos utilizados para utilizarlos... muchas veces al copiar y pegar se cometen errores y no funcionan.. bueno es todo gracias

midesweb

21/5/2009
Sobre subir el zip con los ejemplos
Hola!
Es una buena sugerencia subir el zip con los ejemplos. Pero como son páginas sueltas básicas, también se puede acceder a los ejemplos en marcha y tomar el código completo directamente del servidor.

midesweb

21/5/2009
Capa oculta desde el inicio
Para que la capa que vas a mostrar esté oculta desde el principio simplemente tienes que definirlo con CSS, con el atributo de estilo display:none.

miguel

17/6/2009
Muy buen tutorial
Gracias, es un tutorial fenomenal, me ha venido "de perlas"

eldavan

30/3/2010
hola |||>juan_ca...
hola a todos gracias por el interes de compartir codigo avierto.
pra validaciones solo deance una bueltita por mi bloc, ahi tengo validaciones de formularios que funcionan con BD mysql.
http://my.opera.com/eldavan/blog/

ggleyton

09/9/2010
ocultar y mostrar capas
Hola... he intentado seguir las indicaciones y al final me sale un error en el script:
linea 9
caracter 1
objet expected
codigo 0

Realmente he leido durante días todo y no logro entender cual es el problema que obviamente para quien se inicia es complicado.
Gracias por la ayuda...

ben_martink

10/9/2010
como hacer para que sea desde arriba hacia abajo y viceversa al ocultar
Muy interesante ese efecto compañero, pero me gustaria saber como hacer para que sea desde arriba hacia abajo y viceversa al ocultar.

Gracias,

hans santander baeza

14/11/2010
no se
puedes dar mas detalles del error a mi me funciona bien....solo midifique la ruta del archivo jquery....al parecer el problema no esta en el codigo...mi pc funciona en xo uso de servidor el easyphp....y tengo como navegador el google crhome....eso ...saludos.

Luis Miguel Bravo

25/2/2011
Gracias
Muchas gracias, aqui pongo una funcion generica x si tienene muchos div para ocultar
<a href="javascript:Mostrar('frm-Antecedente')" title="Expandir">+</a>
<a href="javascript:Ocultar('frm-Antecedente')" title ="Contraer">-</a>

function Mostrar(nombre) {
$("#" + nombre).show(1000);
}

function Ocultar(nombre) {
$("#" + nombre ).hide("medium");
}

Aitor

26/8/2011
preventDefault()
Entiendo que este método sirve para que hacer click sobre el enlace no vaya al link especificado. pero en este al tener href="#", ¿sería necesario incluir la llamada a preventDefault? Yo creo que no...

midesweb

26/8/2011
Sobre preventDefault() y enlaces con href #
Hola Aitor,

Realmente sí que hace falta. El enlace con href="#" no va a ningún sitio, pero sí que cambia la URL que se muestra en la barra de direcciones del navegador, poniéndole la # detrás...

Pero ese detalle en la práctica no importa mucho, lo que sí importa es que, al irse el navegador a "#" hace un efecto indeseable muchas veces, que es que te mueve el scroll de la página hacia arriba, al comienzo de la página. Esto muchas veces ni nos damos cuenta, cuando la página ya está con el scroll todo para arriba, pero si tu enlace estuviera muy para abajo lo notarías.

Eduardo

31/8/2011
Gracias
Gracias por la colaboración, me fue muy útil.

erickbuzz

09/1/2012
bien hecho
muy buen articulo...y gracias por la aclaración con el "#" son cosas que nos pueden pasar

renny

28/3/2012
Saludos pregunta sobre el codigo
Saludos hay alguna forma de cuando yo abra la pagina me aparezca el código oculto al principio y luego cuando le de clic en ver sea que me aparezca el código ?

Aitor Hernandez

25/2/2013
Problema velocidad
Buenas,<br />
<br />
A mi me ha surgido un problema a la hora de introducir un tiempo dentro de las funciones show() o hiden(). <br />
<br />
En el transcurso de este tiempo me mostraba la capa en una posicion distinta de la final de la capa con lo cual el efecto quedaba bastante feo. Toqueteando un poco he comprobado que era debido a que tenia la capa con position=relative, con absolute no ocurria esto. <br />
<br />
Queria comentarlo por si alguien tenia el mismo problema o por si alguien mas experto lo quisiera/pudiera confirmar, que hay que tener especial cuidado con esto.<br />
<br />
Gracias.<br />
<br />
pd: es digno de admiracion el trabajo y utilidad que conseguis con todos los manuales, un autentico placer y sitio de referencia para la programacion web.

Javier

05/11/2013
ayuda
buena tarde amigo quisiera saber si me podrias ayudar con un problema que tengo es que necesito para la universidad hacer una pagina y me dijieron que usara jquery porque tengo un listado de nombres de un equipode futbol y que al pasar el curso por encimadel nombre me despliegue la foto del jugador con elnombre, edad ,posicion en la que juega y obutos mas,seraque porfaviormepodrias a ayudar con el codigo de este proyecto solamente en la parte del jquery yo lo otro de la pagina lo tengo. me falta en lo que te escribo que me apararesca el desplegable con la informacion del jugador graciasssss ojala puedas ayudarme

javier diaco

28/5/2014
linterna
estoy con un tp de la facu y no entiendo mucho,
me interesaría desarrollar algo así http://www.ajaxshake.com/plugin/ES/133/6ac258af/convierta-su-cursor-en-una-linterna-con-este-plugin-mootool-flashlight-effect.html
en jquery. si alguno me puede ayudar le agradecería. mi mail es javier_diaco@yahoo.com.ar