20 - Efectos con los métodos show y hide.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

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

<body>
  <div id="descripcion1" 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.</b>
  </div>
  <div id="descripcion2" class="recuadro">
    <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="funciones.js"></script>
</body>

</html>
let x = $(document);
x.ready(inicializarEventos);

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

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

function mostrarRecuadro() {
  let x = $("#descripcion2");
  x.show("slow");
}
.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;
}
#descripcion2 {
  display:none;
}

Confeccionar una página que contenga un div con un conjunto de párrafos. Cuando se presione con el mouse dentro del div ocultarlo lentamente y cuando esté completamente oculto hacer que aparezca lentamente otro bloque de texto.


Ver solución

pagina1.html





funciones.js




estilos.css



Retornar