Efectos con los métodos toggle() en jQuery

El funcionamiento del efecto toggle(), mayoritariamente se usa en casos para ocultar y mostrar elementos de una página web, aunque también funciona como switch entre 2 funciones.

Método toggle ()

El método toggle() alterna entre hide() y show () para los elementos seleccionados sin necesidad de andar duplicando líneas de código.Este método comprueba la visibilidad de los elementos seleccionados. show() se ejecuta si un elemento está oculto. hide() se ejecuta si un elemento está visible: esto crea un efecto de alternancia.

Nota : Los elementos ocultos no se mostrarán en absoluto (ya no afecta el diseño de la página).
Consejo: este método también se puede utilizar para alternar entre funciones personalizadas.

Opciones

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (obligatorio): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("img").toggle('slow');
  });
});
</script>
</head>
<body>
<button>Alternar entre ocultar() y mostrar() de la foto</button>
<img src="imagenes/prueba.jpg" style="max-width:100%;width:auto;height:auto;">
</body>
</html>

Ver ejemplo anterior

El método toggle permite cada vez que se ejecute cambiar de estado la visibilidad del elemento HTML, es decir si está visible pasa a oculto y si se encuentra oculto pasa a visible.

Problema:Hacer que un bloque de información pase de visible a oculto lentamente y viceversa al presionar un botón.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos23.css" type="text/css">
</head>

<body>
  <input type="button" id="boton1" value="Mostrar/Ocultar">
  <div id="descripcion" class="recuadro">
    <p>HTML es el lenguaje que se emplea para el desarrollo de páginas
      de internet.</p>
    <p>Este lenguaje está constituido de elementos que el navegador interpreta
      y las despliega en la pantalla
      de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes
      sobre una página, hipervínculos
      que nos permiten dirigirnos a otra página, listas, tablas para tabular
      datos, etc.</p>
    <p>Para poder crear una página HTML se requiere un simple editor
      de texto (en nuestro caso emplearemos
      este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos
      el navegador que en este preciso momento está utilizando
      (recuerde que usted está viendo en este preciso momento una página HTML
      con su navegador).</p>
    <p>Lo más importante es que en cada concepto desarrolle los ejercicios
      propuestos y modifique los que se presentan ya resueltos.</p>
    <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que
      nunca antes trabajó con el mismo.
      No pretende mostrar todas los elementos HTML en forma alfabética.</p>
    <p>Como veremos, de cada concepto se presenta una parte teórica,
      en la que se da una explicación completa,
      luego se pasa a la sección del ejercicio resuelto donde podemos ver el
      contenido de la página HTML y cómo la visualiza el navegador.
      Por último y tal vez la sección más importante de este tutorial es donde se
      propone que usted haga páginas en forma autónoma (donde realmente
      podrá darse cuenta si el concepto quedó
      firme).</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="func23.js"></script>
</body>

</html>

Ver ejemplo anterior

func23.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(ocultarMostrarRecuadro);
}

function ocultarMostrarRecuadro() {
  let x = $("#descripcion");
  x.toggle("slow");
}

estilos23.css

.recuadro {
  background-color:#ffffcc;
  font-family:verdana;
  font-size:14px;

  border-top-width:1px;
  border-right-width:3px;
  border-bottom-width:3px;
  border-left-width:1px;

  border-top-style:dotted;
  border-right-style:solid;
  border-bottom-style:solid;
  border-left-style:dotted;

  border-top-color:#ffaa00;
  border-right-color:#ff0000;
  border-bottom-color:#ff0000;
  border-left-color:#ffaa00;
}

La función ocultarMostrarRecuadro:

function ocultarMostrarRecuadro() {
  let x = $("#descripcion");
  x.toggle("slow");
}

Se encarga de llamar al método toggle del objeto jQuery, y este analiza si actualmente el elemento está visible u oculto, la transición se hace en forma lenta ya que le pasamos como parámetro el string "slow".

(adsbygoogle = window.adsbygoogle || []).push({});

Efectos con los métodos toggle() en jQuery

Método toggle ()