Temas > Programacion > Java script - Java > Efectos con los metodos show y hide en jQuery
Julio

Efectos con los métodos show y hide
Una característica muy interesante de jQuery que 
nos provee de un serie de efectos visuales.
Ya utilizamos los métodos hide() y show(), que tienen 
por objetivo ocultar y mostrar elementos HTML. Ahora 
veremos que podemos hacer que cuando se oculte o
muestre un elemento lo haga con una pequeña animación 
(que se oculte o muestre lentamente).
Estas características pueden ayudar al usuario a 
concentrarse en una parte de la página donde sucede 
la animación.
Confeccionar una página que muestre un recuadro con texto. 
Disponer dos botones, uno que oculte lentamente el cuadro 
y el otro que lo muestre rápidamente.
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.hide("slow");
 }
 function mostrarRecuadro()
 {
    var x=$("#descripcion");
    x.show("fast");
 }
?>//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.hide("slow");
}
?>//esto no va
donde obtenemos la referencia del div mediante su id 
y procedemos a llamar al método hide pasándole el string 
"slow", con esto logramos que se oculte el recuadro
lentamente. De forma similar la función mostrarRecuadro:
<?php //esto no va
function mostrarRecuadro()
{
   var x=$("#descripcion");
   x.show("fast");
}
?>//esto no va
llama a la función show pasando como parámetro el string
"fast". Hay varias formas para llamar a los métodos show y 
hide:
Lo muestra en forma instantanea:
show()
Lo muestra con una animación rápida:
show("fast")
Lo muestra con una animación normal:
show("normal")
Lo muestra con una animación lenta:
show("slow")
Lo muestra con una animación que tarda tantos milisegundos 
como le indicamos:
show([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:
show([cantidad de miliseg













¿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