Búsqueda personalizada
 
 
 
 
Efecto con el método toggle
 

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 pginas 
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 
imgenes sobre una pgina, hipervnculos
que nos permiten dirigirnos a otra pgina, listas, tablas para tabular 
datos, etc.</b><p>Para poder crear una pgina 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 pgina HTML
con su navegador).</p>
<p>Lo ms 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 alfabtica.</p>
<p>Como veremos, de cada concepto se presenta una parte terica, 
en la que se da una explicacin completa,
luego se pasa a la seccin del ejercicio resuelto donde podemos ver el 
contenido de la pgina HTML y cmo la visualiza el navegador. 
Por ltimo y tal vez la seccin ms importante de este tutorial es 
donde se propone que usted haga pginas en forma autnoma (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".

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion