Fecha del Tema: 2013-04-18 18:28:34

Efecto con el método fadeTo
El método fadeTo puede modificar la opacidad de un 
elemento, el efecto es llevar la opacidad actual hasta 
el valor que le pasamos al método fadeTo.
Podemos inicializar este método de las siguientes formas:
fadeTo([velocidad],[valor de opacidad])
Indicamos la velocidad de transición del estado actual al 
nuevo estado (slow/normal/fast) o un valor indicado en 
milisegúndos.
El valor de la opacidad es un numero real entre 0 y 1. 1 
significa sin opacidad y 0 es transparente.
También podemos llamar al método fadeTo con tres 
parámetros:
fadeTo([velocidad],[valor de opacidad],[función])
Esta segunda estructura de la función permite ejecutar 
una función cuando finaliza la transición.
Hay que tener en cuenta que fadeTo por más que 
indiquemos el valor 0 en opacidad el espacio que ocupa el 
elemento en la página seguirá ocupado por un recuadro
vacío.
Confeccionar una página que muestre un recuadro con 
texto. Disponer dos botones, uno que cambie la opacidad 
lentamente hasta el valor 0.5 y el otro que
lo muestre lentamente hasta el valor 1.
pagina1.html
<?php //esto no va
 <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="Reducir opacidad">
 <input type="button" id="boton2" value="Aumentar opacidad">
 <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>
?>//esto no va
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
   var x=$("#boton1");
   x.click(reducirOpacidadRecuadro);
   x=$("#boton2");
   x.click(aumentarOpacidadRecuadro);
 }
 function reducirOpacidadRecuadro()
 {
    var x=$("#descripcion");
    x.fadeTo("slow",0.5);
 }
 function aumentarOpacidadRecuadro()
 {
    var x=$("#descripcion");
    x.fadeTo("slow",1);
 }
?>//esto no va
estilos.css
<?php //esto no va
 .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;
 }
?>//esto no va
Cuando se presiona el botón de reducir la opacidad 
llamamos al método fadeTo con el valor 0.5:
<?php //esto no va
function reducirOpacidadRecuadro()
{
   var x=$("#descripcion");
   x.fadeTo("slow",0.5);
}
?>//esto no va
y cuando presionamos el botón de aumentar la opacidad 
llamamos al método fadeTo con valor 1 en opacidad 
(significa opacidad total):
<?php //esto no va
function aumentarOpacidadRecuadro()
{
   var x=$("#descripcion");
   x.fadeTo("slow",1);
}
?>//esto no va