Blog
Efecto sliding con jQuery
- Publicado por: admin
- Categoría: Blog Java Script 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.