21 - Efectos con los métodos fadeIn y fadeOut.

Estos dos métodos son similares a show y hide pero con la diferencia que fadeIn hace aparecer los elementos HTML con opacidad. El método fadeOut decolora hasta desaparecer, es decir reduce la opacidad del elemento en forma progresiva.

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que oculte (fadeOut) y el otro que lo muestre (fadeIn).

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="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.</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(ocultarRecuadro);
  x=$("#boton2");
  x.click(mostrarRecuadro);
}

function ocultarRecuadro()
{
  var x=$("#descripcion");
  x.fadeOut("slow");
}

function mostrarRecuadro()
{
  var x=$("#descripcion");
  x.fadeIn("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 ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar recuadro":

function ocultarRecuadro()
{
  var x=$("#descripcion");
  x.fadeOut("slow");
}

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

De forma similar la función mostrarRecuadro:

function mostrarRecuadro()
{
  var x=$("#descripcion");
  x.fadeIn("slow");
}

llama a la función fadeIn pasando como parámetro el string "slow".

Las formas de llamar a los métodos fadeIn y fadeOut:

Lo muestra con una animación rápida:

fadeIn("fast")

Lo muestra con una animación normal:

fadeIn("normal")

Lo muestra con una animación lenta:

fadeIn("slow")

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

fadeIn([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:

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

De forma similar funciona el método fadeOut.


Retornar