En el post pasado sobre hablamos sobre como podemos trabajar con la opacidad y visibilidad de los elementos (ver entrada) para ofrecer animaciones sencillas al usuario pero que a su vez mejoran la experiencia del usuario, y continuando con el tema de animaciones con jQuery, hoy vamos a ver como podemos aplicar efectos de tipo slide (deslizantes) a nuestros elementos, estos efectos permiten ocultar o mostrar elementos deslizándolos de forma vertical.

Para trabajar los efectos deslizantes jQuery ofrece tres métodos distintos los cuales trabajan con la propiedad display del elemento:

  • slideDown(): Permite mostrar un elemento deslizándolo hacia abajo, es decir cambia el valor de la propiedad display:none a block. Este método acepta tres parámetros de los cuales los tres son opcionales, los cuales son a)duración: tiempo que dura el efecto, b) easing: efecto deslizante y c) función_fin: función que se ejecuta cuando se termina de realizar el efecto.
1: $("elemento").slideDown(duración, easing, función_fin);
  • slideUp(): Permite ocultar un elemento deslizándolo hacia arriba, es decir cambia el valor de la propiedad display block a none. Este método acepta tres parámetros de los cuales los tres son opcionales, los cuales son a)duración: tiempo que dura el efecto, b) easing: efecto deslizante y c) función_fin: función que se ejecuta cuando se termina de realizar el efecto.
1: $("elemento").slideUp(duración, easing, función_fin);
  • slideToggle(): Este método podemos decir que encapsula los dos métodos anteriores y administra el mismo el estado del control, es decir son slideToggle() no tenemos que verificar el estado de un control para determinar si esta visible o no, ya que este método realiza dicha validación y oculta/muestra el elemento dependiendo de su estado actual. Al igual que los dos métodos anteriores se dispone de tres parámetros opcionales que son: a)duración: tiempo que dura el efecto, b) easing: efecto deslizante y c) función_fin: función que se ejecuta cuando se termina de realizar el efecto.
1: $("elemento").slideToggle(duración, easing, función_fin);

Ahora que ya conocemos la teoría vamos a realizar un ejemplo, en donde vamos a tener un panel que se va a ocultar/mostrar.

  1. Creamos un div el cual sera el que se oculte o muestre, ademas de un label el cual al darle click realizará el efecto sobre el div:
1: <labelid="lblVerDiv"style="font-weight:bold; float:left; color:#0B3861; cursor:pointer;">Ver/Ocultar Informaciónlabel> 2: <divid="divContenido"style="height:250px; width:100%; border:3px Double Green;"> 3: Contenido del div 4: div>
2. Finalmente con [jQuery](http://jquery.com/) capturamos el click en el label y utilizamos en este caso el método [slideToggle()](http://api.jquery.com/slideToggle/): >
1: $(function () { > > 2: $("#lblVerDiv").click(function () { > > 3: $("#divContenido").slideToggle('slow'); > > 4: }) > > 5: }) > >

Espero les este gustando aprende como se animan elementos con jQuery:

Descarga el ejemplo!