Temas > Programacion > Java script - Java > Efectos con los metodos fadeIn y fadeOut en jQuery
Julio

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. 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
<?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="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>
?>//esto no va
funciones.js
<?php //esto no va
 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");
 }
?>//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
La función ocultarRecuadro se ejecuta cuando presionamos 
el botón de "Ocultar recuadro":
<?php //esto no va
function ocultarRecuadro()
{
   var x=$("#descripcion");
   x.fadeOut("slow");
}
?>//esto no va
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:
<?php //esto no va
function mostrarRecuadro()
{
   var x=$("#descripcion");
   x.fadeIn("slow");
}
?>//esto no va
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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar