[jQuery] Animaciones II: Deslizando elementos

Posted on


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:  <label id="lblVerDiv" style="font-weight:bold; float:left; color:#0B3861; cursor:pointer;">Ver/Ocultar Información</label>
   2:  <div id="divContenido" style="height:250px; width:100%; border:3px Double Green;">
   3:      Contenido del div
   4:  </div>

2. Finalmente con jQuery capturamos el click en el label y utilizamos en este caso el método 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!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s