jQuery

Efecto sliding con jQuery

Anteriormente hemos visto cómo crear transiciones en CSS, hoy nos toca aprender a crear un efecto sliding con jQuery utilizando la función slideToggle.

¿Cómo crear un efecto sliding con jQuery?

Para crear un efecto vamos a utilizar la función slideToggle. Esta función permite ocultar o mostrar un elemento mediante una animación dependiendo del estado en el que se encuentre. En el siguiente ejemplo vamos a ver como funciona esta característica de jQuery:

<!DOCTYPE html>
<html>
  <head>
    <title>Efecto sliding con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .cuadrado{
        width:200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="cuadrado"></div>
    <button type="button" onclick="efectoSliding()">Efecto sliding</button>
    <script>
      function efectoSliding(){
        $('#cuadrado').slideToggle();
      }
    </script>
  </body>
</html>

Al presionar el botón se va a ocultar o mostrar el cuadrado rojo con una animación dependiendo de su estado actual.

Esta funcionalidad permite ser configurada con varias opciones, en el siguiente ejemplo ser muestran las más destacadas:

$('#cuadrado').slideToggle({
  // Duración de la animacion en milisegundos
  duration: 2000, 
  // Función que se ejecuta cuando termina la animación
  complete: function(){  
    alert('Animación terminada.');
  },
  // Función que se ejecuta cuando se inicia la animación
  start: function(animation ){
    alert('La animación ha comenzado.');
  },
  // Función que se ejecuta cuando falla la animación
  fail: function(animation ){
    alert('Ha ocurrido un error.');
  }
});

Hemos llegado al final de este tutorial, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *