julio 19, 2009 2

Los efectos especiales de jQuery

By in JavaScript, Librerías

Ya he hablado anteriormente del framework jQuery. Hoy vamos a comentar los efectos especiales que implementa el framework.

Efectos básicos:

Efecto Descripción
Show() Muestra los elementos seleccionados.
Show(speed, callback) Muestra los elementos seleccionados a la velocidad indicada y al final lanza un callback si se ha indicado.
hide() Oculta los elementos seleccionados.
hide(speed, callback) Oculta los elementos seleccionados a la velocidad indicada y al final lanza un callback si se ha indicado.
toggle() Conmuta la visibilidad de los elementos seleccionados.
toggle(switch) Conmuta la visibilidad de los elementos seleccionados en función del valor del parámetro switch. Si es true lo muestra, si es false lo oculta.
toggle(speed, callback) Conmuta la visibilidad de los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicado.

Efectos móviles:

Efecto Descripción
slideDown(speed, callback) Despliega los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicado.
slideUp(speed, callback) Encoge los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicada.
slideToggle(speed, callback) Muestra u oculta el elemento mediante despliegue dependiendo de como estuviera. Al final lanza un callback si se ha indicado.

Efectos de fundido:

Efecto Descripción
fadeIn(speed, callback) Muestra mediante un fundido los elementos seleccionados. Al final lanza un callback si se ha indicado.
fadeOut(speed, callback) Oculta mediante un fundido los elementos seleccionados. Al final lanza un callback si se ha indicado.
fadeTo(speed, opacity, callback) Realiza un fundido de los elementos seleccionados hasta la opacidad indicada. La opacidad es un número entre 0 (transparente) y 1 (opaco). Al final lanza un callback si se ha indicado.

En todos los métodos en los que se puede indicar la velocidad esta tomara los valores ‘slow’, ‘normal’, ‘fast’ o el número de milisegundos que durará la animación.

Después de esto vamos a ver un pequeño ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Efectos especiales con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<style>
 .cuadro {
 	background-color:#4682b4;
 	color: #fff;
 	padding: 5px;
 	width: 400px;
 	border-width: 2px;
 	border-color: #000;
 	border-style: solid;
 }
</style>
</head>
<body>
<h1>Efectos especiales con jQuery</h1>
<a href="#" onclick="$('#c1').show();">[show]</a> <a href="#" onclick="$('#c1').hide();">[hide]</a> <a href="#" onclick="$('#c1').toggle();">[toggle]</a><br/>
<a href="#" onclick="$('#c1').slideDown('slow');">[slideDown]</a> <a href="#" onclick="$('#c1').slideUp('slow');">[slideUp]</a> <a href="#" onclick="$('#c1').slideToggle('slow');">[slideToggle]</a><br/>
<a href="#" onclick="$('#c1').fadeIn('slow');">[fadeIn]</a> <a href="#" onclick="$('#c1').fadeOut('slow');">[fadeOut]</a><br/>
<a href="#" onclick="$('#c1').fadeTo('slow', 0);">[fadeTo 0%]</a> <a href="#" onclick="$('#c1').fadeTo('slow', 0.25);">[fadeTo 25%]</a>
<a href="#" onclick="$('#c1').fadeTo('slow', 0.5);">[fadeTo 50%]</a> <a href="#" onclick="$('#c1').fadeTo('slow', 0.75);">[fadeTo 75%]</a>
<a href="#" onclick="$('#c1').fadeTo('slow', 1);">[fadeTo 100%]</a><br/>
<div id="c1" class="cuadro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mauris risus.
Duis ornare euismod fringilla. Etiam nec ante sem, a cursus massa. Duis rutrum
metus blandit tellus rhoncus quis sodales lacus porttitor. Quisque posuere,
metus eu imperdiet egestas, diam justo ornare est, quis lacinia enim eros id massa.
Curabitur volutpat porta iaculis. Proin vitae elit sodales leo lacinia tincidunt.
</div>
</body>
</html>

Podéis ver este ejemplo en acción aquí. También podéis descargar el código con los ejemplos, algo recomendado para poder tocar si queréis:

Ejemplo de efectos con jQuery

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

2 Responses to “Los efectos especiales de jQuery”

  1. ide dice:

    gracias por el sitio y por los ejemplos, tambien podeis ver buenos ejemplos de efectos en http://www.ankestudio.com/blog.html <a href=”http://www.ankestudio.com” title=”diseño web”>diseño de paginas web</a>

  2. ide dice:

    gracias por el sitio y por los ejemplos, tambien podeis ver buenos ejemplos de efectos en http://www.ankestudio.com/blog.html          <a href=”http://www.ankestudio.com” title=”diseño web”>diseño de paginas web</a>

Leave a Reply