Blog
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.