Búsqueda personalizada
 
 
 
 
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

Problema: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

<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.hide("slow");  }    

 function mostrarRecuadro()  {    
  var x=$("#descripcion");    
  x.show("fast");  }  

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.hide("slow");  }  

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:

  function mostrarRecuadro()  {    
    var x=$("#descripcion");    
    x.show("fast");  }  

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 milisegundos],[función])  

De forma similar funciona el método hide.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion