El efecto slide es el que nos permite realizar un desplazamiento de un elemento en alguna dirección (izquierda, derecha, arriba o abajo). En las siguientes líneas veremos lo sencillo que es hacerlo con jQuery.
En nuestro ejemplo vamos a desplazar una capa que tengamos en la página, para ocultarla. De esta manera aplicaremos el efecto slide en ese momento.
Lo primero que tenemos que saber es que la función que oculta un elemento en jQuery es .hide(). Pero si vemos la sintaxis (la más común) de esta función:
.hide(velocidad, [funcion_callback])
Nos damos cuenta que solo podemos aplicar una velocidad de ocultación y una función de callback para ejecutar cuando se termine la ocultación. Entonces, ¿dónde ejecuto el efecto?
Para ello tenemos la librería jQuery UI, que es una extensión al core de jQuery, dotándole de capacidades gráficas como la de los efectos.
Así en jQuery UI encontraremos una extensión de la función .hide() para que podamos aplicar efectos. Lo mismo sucede con las funciones .show() y .toggle(). De esta manera la función .hide() podrá recibir un efecto como parámetro.
El efecto se compondrá de dos partes:
- Nombre del efecto
- Parámetros del efecto
En el caso del efecto slide podemos indicar como parámetros la dirección (izquierda, arriba,…), distancia (punto del elemento en el que se aplicará el efecto) y el modo (si es show o hide).
De esa manera nuestro efecto saliendo hacía la izquierda sería algo así:
$(this).hide("slide", { direction: "left" }, 5000);
Dónde this será el elemento sobre el que aplicamos el efecto. Por ejemplo, si queremos desplazar una capa:
El código jQuery nos quedará de la siguiente forma:
$(document).ready(function(){
$("#micapa").click(function(){
$(this).hide("slide", { direction: "left" }, 5000);
});
});
Hemos utilizado el método .click() para lanzar el efecto cuando se pulse sobre la capa.
Con esos sencillos pasos tenemos completado el efecto slide con jQuery.
