Efecto slide con jQuery

05/Ene/2012 jQuery , , 8 Comentarios
programación jquery en español

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:

  1. .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í:

  1. $(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:

  1. <div id="micapa" style="background-color:red;width:100px;height:100px"></div>

El código jQuery nos quedará de la siguiente forma:

  1. $(document).ready(function(){
  2. $("#micapa").click(function(){
  3. $(this).hide("slide", { direction: "left" }, 5000);
  4. });
  5. });

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.

Vídeos sobre jQuery


8 comentarios en “Efecto slide con jQuery”

Víctor Cuervo

Claudia

$(window).load(function() {
$(‘#slider’).nivoSlider();
});

Víctor Cuervo

Claudia

Hola:
Tengo un slider de 4 imágenes, pero me pasan muy rápido y yo quiero que sea más lenta su transcripción. Tengo este código jquery y quiero saber si le puedo agregar una variable de tiempo o velocidad:

$(window).load(function() {
$(‘#slider’).nivoSlider();
});

Gracias

Víctor Cuervo

programador

alert(‘Buena pagina’);

Víctor Cuervo

anonymous

esto no es requerido entonces o si!?

$(“#ocultar”).click(
function(){
$(“#msgid1”).click(function(){
$(this).hide(“slide”, { direction: “left” }, 5000);
})
});

Víctor Cuervo

asd

var i = 0;
var a = setInterval(function(){
i++;
alert(i);
},1000);

if(i == 3000){
clearInterval(a);
}

Víctor Cuervo

asd

alert(“hola”);

Víctor Cuervo

asd

“>alert(‘hello’);

Víctor Cuervo

Miguel

¿Para utilizar este efecto, es necesario descargar una librería extra de jQuery UI?
El codigo que utilizo este:


$("#ocultar").click(
function(){
$("#msgid1").click(function(){
$(this).hide("slide", { direction: "left" }, 5000);
})
});

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*