Conceptos de JQuery

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

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</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.</b><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>
</body>
</html>

funciones.js

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

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

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

estilos.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()
{
  var 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".

23 - Efecto con el método toggle.

Retornar