En el anterior artículo aprendimos a mostrar y ocultar elementos de la página con jQuery. Comprobamos lo sencillo que es conseguir este tipo de manipulación en el CSS de los elementos, con la función css() de los objetos jQuery. Sin embargo, este cambio de las CSS se realizó de una manera inmediata, un poco brusca. En este artículo vamos a aprender a utilizar las funciones de efectos para conseguir estos cambios de una manera suavizada.

Qué son los efectos en jQuery

Una de las ventajas más destacadas de jQuery es la realización de efectos especiales para páginas web, que se desarrollan de manera sencilla y con poco código. Estos efectos sirven para aplicar dinamismo a una página web mediante una animación suavizada frente la interacción con el usuario, lo que hace que las páginas programadas con jQuery ofrezcan una imagen atractiva.

Con jQuery puedes realizar cualquier tipo de efecto suavizado, ya que existen métodos que nos permiten configurar los efectos de una manera totalmente personalizada. Pero además en jQuery disponemos de un puñado de métodos que podemos usar para realizar sin muchas complicaciones efectos ya predefinidos. Para ello existen unas funciones que simplifican la tarea de los desarrolladores donde, en muchos casos, conseguir un efecto nos llevará una línea de código en nuestro programa, como esta:

$("#capaefectos").hide("slow");

Con esto conseguimos que el elemento con id="capaefectos" desaparezca de la página. Pero además, el efecto no es un simple fundido del elemento en la página (hacerse transparente), sino que también va acompañado de una reducción de tamaño progresiva hasta desaparecer.

Combinando los efectos con la interacción de usuario, por medio de eventos, podemos conseguir que los efectos respondan a las acciones del visitante, lo que multiplica las posibilidades, manteniendo la sencillez, elegancia y facilidad de mantenimiento del código Javascript. Lo vamos a ver en un ejemplo a continuación.

Ejemplo de efectos e interacción en jQuery

En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. Vamos a implementar un simple efecto de ocultar y mostrar de manera suavizada un elemento de la página web.

Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos que al pulsar los enlaces se oculte y se muestre la capa, con las funciones de la librería Effects.

Para comenzar, este es el código HTML del ejemplo, que comprende tanto la capa como los enlaces.

<div id="capaefectos" style="background-color: #cc7700; color: #fff; padding: 10px;">
Esto es una capa que nos servirá para hacer efectos!
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las funciones de Effects, que harán que se muestre y oculte la capa.

En el siguiente código Javascript veremos cómo realizar este comportamiento dinámico con jQuery, tanto la parte de la definición del evento click sobre el enlace como la parte de la ejecución del evento.

$(document).ready(function(){
   $("#ocultar").click(function(event){
    event.preventDefault();
    $("#capaefectos").hide("slow");
   });

   $("#mostrar").click(function(event){
    event.preventDefault();
    $("#capaefectos").show(3000);
   });
});

Como se puede ver, primero tenemos que definir el evento ready del objeto $(document), para hacer cosas cuando el documento está preparado para recibir acciones.

Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el método click sobre el enlace, que hemos seleccionado con jQuery a través del identificador de la etiqueta A.

$("#ocultar").click(function(event){

Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".

Dentro de la función a ejecutar cuando se hace clic, se coloca la llamada a la función de los efectos.

$("#capaefectos").hide("slow");

Esto hace que nuestra capa, a la que habíamos puesto el identificador (atributo id) "capaefectos", se oculte. Pasamos el parámetro "slow" porque queremos que el efecto sea lento.

Ahora veamos la función de los efectos con otra llamada:

$("#capaefectos").show(3000);

Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse dure 3000 milisegundos.

No hay más complicaciones, así que si habéis entendido esto ya sabéis hacer efectos simples pero atractivos con jQuery en vuestra página web.

Efecto de cortinilla

Hemos visto el efecto producido por los métodos show() y hide() de jQuery, pero existen otras funciones de efectos rápidos que puedes realizar de una manera rápida y simple. Ahora vamos a ver cómo realizar lo que llamo un efecto de cortinilla, en el que el proceso de mostrar y ocultar ocurre con una amimación de abajo a arriba, o arriba a abajo.

El modo de funcionamiento es exactamente igual en lo que respecta a la creación de los eventos, solo que usaremos los métodos slideDown() para mostrar un elemento que esté oculto y slideUp() para ocultarlo.

Un elemento se mosrtará con una animación de cortinilla, de arriba hacia abajo, con la siguiente llamada.

$("#capaefectos").slideDown("slow");

Y la animación en sentido contrario para ocultar el elemento la podemos realizar así:

$("#capaefectos").slideUp(2000);

Código completo de una página que realiza efectos

Ahora podréis ver el código completo de este ejemplo creado por DesarrolloWeb.com para demostrar el uso de efectos.

Podrás apreciar que hemos realizado unos pequeños cambios en el código final, para mejorar un poco el uso de CSS y también para guardarnos en una variable el elemento de los efectos, que reutilizaremos cada vez que queramos manipular ese elemento de la página para mostrarlo o ocultarlo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Efectos rápidos con jQuery</title>
  <style>
    body {
      font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }
    #capaefectos {
      background-color: #885104; 
      color: #fff; 
      font-weight: bold;
      padding:10px;
      max-width: 400px;
      line-height: 1.4rem;
    }
  </style>
</head>
<body>
  <div id="capaefectos">
    Este elemento de la página nos servirá para implementar algunos efectos rápidos!
    <br><br>
    jQuery para estas cosas es muy cómodo!
  </div>
  
  <p>
    <a href="#" id="ocultar">Ocultar la capa</a> |
    <a href="#" id="mostrar">Mostrar la capa</a>
  </p>

  <p>
    Efectos slide:
    <a href="#" id="slideup">Slide Up</a> |
    <a href="#" id="slidedown">Slide Down</a>
  </p>

  <script src="../js/jquery-3.6.3.js">
  </script>
  <script>
    $(document).ready(function () {

      const capaEfectos = $("#capaefectos");
      
      $("#ocultar").click(function (event) {
        event.preventDefault();
        capaEfectos.hide("slow");
      });
  
      $("#mostrar").click(function (event) {
        event.preventDefault();
        capaEfectos.show(3000);
      });

      $("#slideup").click(function (event) {
        event.preventDefault();
        capaEfectos.slideUp(3000);
      });

      $("#slidedown").click(function (event) {
        event.preventDefault();
        capaEfectos.slideDown("slow");
      });
      
    });
  </script>
</body>
</html>

Como se ha podido comprobar, hacer efectos con jQuery es bastante sencillo. Claro que hay otros detalles importantes y otros tipos de efectos y funcionalidades de personalización de los mismos, pero esto nos ha servido para demostrar lo sencillo que es trabajar con la librería Javascript para hacer efectos típicos y recurrentes. En siguientes artículos seguiremos explorando casos de uso sencillos de jQuery.