¿Estás buscando una forma sencilla pero efectiva de agregar animaciones a tu sitio web? ¡Entonces la biblioteca de efectos deslizantes de jQuery es justo lo que necesitas! En este artículo de TIEngranaje, te mostraremos cómo puedes utilizar esta herramienta para crear transiciones suaves y elegantes que sorprenderán a tus visitantes y mejorarán la experiencia de usuario en tu sitio web. ¡No esperes más y comienza a deslizar tus efectos hoy mismo!
jQuery tiene varios métodos que se pueden usar para crear una variedad de efectos de animación deslizantes. El uso de jQuery entre los diseñadores web sigue creciendo en popularidad.
Con respecto a las técnicas básicas de deslizamiento, los métodos típicos utilizados son slideDown(), slideUp()y slideToggle().
Sintaxis
$(selector).slideDown(speed,easing,callback)
$(selector).slideUp(speed,easing,callback)
$(selector).slideToggle(speed,easing,callback)| Parámetro | Descripción |
|---|---|
speed |
Valores opcionales en milisegundos, slow, normaly fast. |
easing |
Indica qué función de aceleración (swing/lineal) usar para la transición. |
callback |
Una función opcional para ejecutar después de que se complete el método. |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-sliding-effects-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="slideDown.png" />
<img id="img2" src="slideUp.png" />
<img id="img3" src="toggle.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Ejemplo
En el siguiente ejemplo, usaremos el evento de clic para activar el slideDown(), slideUp()y slideToggle() métodos en el elemento div adyacente a las imágenes.
También notará que modificamos el atributo fuente de img3 cuando el elemento div está en estado de mostrar u ocultar.
<script type="text/javascript">
$("#img1").click(function(){
$("div").slideDown();
$("#img3").attr("src", "collapse.png");
});
$("#img2").click(function(){
$("div").slideUp();
$("#img3").attr("src", "expand.png");
});
$("#img3").click(function () {
$("#div1").slideToggle("slow");
var $img = $("#img3")
if ($img.attr("src") == "expand.png") {
$img.attr("src", "collapse.png");
} else {
$img.attr("src", "expand.png");
}
});
</script> 