Efectos con los métodos show y hide

Las funciones de jQuery show() y hide(), se usan para mostrar y ocultar elementos del DOM de la web, mayoritariamente suelen ser divs, ids, clases, imágenes, elementos de formularios, etiquetas.

Método show ()

El método show () muestra los elementos seleccionados ocultos. Nota: show () funciona en elementos ocultos con métodos jQuery y display: none en CSS (pero no visibilidad: hidden).

Consejo: para ocultar elementos, mire el método hide () .

Sintaxis

$(selector).show(speed,easing,callback)

Opciones

speed Es opcional y especifica la velocidad del efecto de espectáculo. El valor predeterminado es 400 milisegundos pero puede tener valores posibles, milisegundos , "slow" y "fast"

easing Es opcional y especifica la velocidad del elemento en diferentes puntos de la animación. El valor predeterminado es "swing" , pero puede tener valores posibles, "swing" , se mueve más lento al principio / final, pero más rápido en el medio y "lineal" , se mueve a una velocidad constante hay más funciones de aceleración disponibles en complementos externos

callback Es opcional una función que se ejecutará después de que se complete el método show () Para obtener más información sobre la devolución de llamada, visite nuestro capítulo de devolución de llamada de jQuery

Método hide ()

El método hide () oculta los elementos seleccionados. Sugerencia: Esto es similar a la visualización de propiedades CSS: ninguna.

Nota : Los elementos ocultos no se mostrarán en absoluto (ya no afecta el diseño de la página).

Consejo: para mostrar elementos ocultos, consulte el método show () .

$(selector).hide(speed,easing,callback)

Opciones

speed Es opcional y especifica la velocidad del efecto de espectáculo. El valor predeterminado es 400 milisegundos pero puede tener valores posibles, milisegundos , "slow" y "fast"

Ejemplo

Ocultar o mostrar todos una imagen al apretar uno de los botones.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("img").hide();
  });
  $(".btn2").click(function(){
    $("img").show();
  });
});
</script>
</head>
<body>
<img src="imagenes/prueba.jpg" style="max-width:100%;width:auto;height:auto;"><br>
<button class="btn1">Ocultar foto</button>
<button class="btn2">Mostrar foto</button>
</body>
</html>

Ver ejemplo anterior

Una característica muy interesante de jQuery que nos provee de un serie de efectos visuales.

Ya utilizamos los métodos hide() y show(), que tienen por objetivo ocultar y mostrar elementos HTML. Ahora veremos que podemos hacer que cuando se oculte o muestre un elemento lo haga con una pequeña animación (que se oculte o muestre lentamente)

Estas características pueden ayudar al usuario a concentrarse en una parte de la página donde sucede la animación

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que oculte lentamente el cuadro y el otro que lo muestre rápidamente.

<!DOCTYPE html>
<html>

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

<body>
  <input type="button" id="boton1" value="Ocultar recuadro">
  <input type="button" id="boton2" value="Mostrar recuadro">
  <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="func20.js"></script>
</body>

</html>

Ver ejemplo anterior

func20.js

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

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

function ocultarRecuadro() {
  let x = $("#descripcion");
  x.hide("slow");
}

function mostrarRecuadro() {
  let x = $("#descripcion");
  x.show("fast");
}

estilos20.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 ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar recuadro":

function ocultarRecuadro() {
  let x = $("#descripcion");
  x.hide("slow");
}

donde obtenemos la referencia del div mediante su id y procedemos a llamar al método hide pasándole el string "slow", con esto logramos que se oculte el recuadro lentamente.

De forma similar la función mostrarRecuadro:

function mostrarRecuadro() {
  let x = $("#descripcion");
  x.show("fast");
}

llama a la función show pasando como parámetro el string "fast".

Hay varias formas para llamar a los métodos show y hide:

Lo muestra en forma instantanea:

show()

Lo muestra con una animación rápida:

show("fast")

Lo muestra con una animación normal:

show("normal")

Lo muestra con una animación lenta:

show("slow")

Lo muestra con una animación que tarda tantos milisegundos como le indicamos:

show([cantidad de milisegundos])

Lo muestra con una animación que tarda tantos milisegundos como le indicamos y ejecuta al final la función que le pasamos como segundo parámetro:

show([cantidad de milisegundos],[función])

De forma similar funciona el método hide.

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

Efectos con los métodos show y hide

Método show ()

Método hide ()