Categoria: Programacion Tema: Java script - Java Titulo: Efecto con el metodo fadeTo en jQuery
Fecha del Tema: 2013-04-18 18:28:34Efecto 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
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
