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.
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;">
<p>
Esto es una capa que nos servirá para hacer efectos!
</div>
<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".
$("#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.
Compartir en redes sociales
 juan_ca... | preventDefault | 19/5/2009 |
| COmo hacer que la capa DIV inicie oculta? Por: Omar | 19/5/2009
|
| excelente codigo Por: xavier | 20/5/2009
|
| Sobre subir el zip con los ejemplos | 21/5/2009 |
| Capa oculta desde el inicio | 21/5/2009 |
| Muy buen tutorial Por: miguel | 17/6/2009
|
eldavan | hola |||>juan_ca... | 30/3/2010 |
ggleyto... | ocultar y mostrar capas | 09/9/2010 |
| como hacer para que sea desde arriba hacia abajo y viceversa al ocultar Por: ben_martink | 10/9/2010
|
| no se Por: hans santander baeza | 14/11/2010
|
| Gracias Por: Luis Miguel Bravo | 25/2/2011
|
| preventDefault() Por: Aitor | 26/8/2011
|
| Sobre preventDefault() y enlaces con href # | 26/8/2011 |
erickbu... | bien hecho | 09/1/2012 |
Usuarios: 
07 de mayo de 2009
Valoración del artículo:
