3

Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 153

Visitas el mes pasado: 218

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual jQuery : desarrollo web
Desarrollo Web
jQuery Tutorial
w3schools.com
jQuery API - (página oficial)
jquery.com
Manual de jQuery
lawebera.es
Fundamentos de jQuery
librojquery.com
Introducción al jQuery
www.comocreartuweb.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




jQuery (XI)

Efectos especiales I

imagen jquery

Introducción

Hay cierto tipo de efectos creados con javascript que suelen ser muy demandados para las páginas web. Ejemplos de ellos son los cambios progresivos (y no instantáneos) del estado de un elemento al hacer click sobre él, efectos de movimiento, etc.

jQuery ha pensado en ello y tiene una serie de métodos que simplifican mucho este tipo de acciones, son los "efectos especiales" que veremos a continuación.


Efecto mostrar / ocultar

Jquery dispone de unos métodos especiales para mostrar u ocultar elementos:

.hide() : Este método permite ocultar un elemento, su uso es simple, por ejemplo:

$("#elemento1").hide();

Este código permite ocultar el elemento indicado (con id="elemento1"). Opcionalmente se puede pasar un argumento que indica la velocidad a la que desaparece el elemento, este puede ser las palabras "fast"(rápido), "slow"(lento) o un número que indica la cantidad de milisegundos que tarda.

$("#elemento1").hide("slow");

Este código hace desaparecer el elemento de forma lenta, con un efecto que va de total opacidad hacia total transparencia, y de reduccion de tamañó hasta su desaparición.

$("#elemento1").hide(2000);

Este otro ejemplo es parecido al anterior, aquí el cambio de visible a desaparición dura 2000 milisegundos.

.show() : Este es el efecto contrario al anterior, hace aparecer el elemento que está desaparecido. podemos pasarle también un argumento con los mismos valores que en el método anterior, consiguiendo los mismos efectos, pero en sentido contrario.

$("#elemento1").show("slow")

A estos dos métodos podemos pasarle también como segundo argumento una función en "callback", que se ejecutará después de que se haya completado el efecto de mostrar u ocultar.

$("#elemento1").show("slow",function(){ ... });

La función anónima que ponemos en el segundon argumento, se ejecutará después de que el elemento se haya mostrado totalmente.

.toggle() : Este método combina los dos anteriores, es decir si el párrafo está oculto lo muestra, y si esta visible, lo oculta. Admite también los mismos parámetros opcionales con los mismos efectos:

Mostrar y ocultar

Párrafo fijo, se muestra siempre

Párrafo móvil, puede mostrarse y ocultarse pulsando el botón.

Otro párrafo fijo, también se muestra siempre.

$("#capa1").toggle(2000)

Aquí hemos hecho un pequeño ejemplo de cómo funciona en el recuadro de la derecha, Ele elemento que se muestra/oculta tiene un id="p2"

.

Hemos pueston también un botón de control con id="boton1". Puedes comprobar su funcionamiento pulsando el botón.

El código que hemos empleado para hacer funcionar este ejemplo es el siguiente:

$("#boton1").click(function(){
$("#p2").toggle(2000);
});


Efecto de fundido

El efecto de fundido consiste en hacer aparecer o desaparecer un elemento cambiando su nivel de transparencia , de forma que desaparece o aparece cambiando su nivel de opacidad, de manera progresiva.

.fadeOut() : este método hace que un elemento se vuelva totalmente transparente. Se le puede pasar un primer argumento con los valores "fast", "slow", o un número con los milisegundos que tarda el efecto.

$("#elemento1").fadeOut("slow");

.fadeIn() : Este es el método contrario al anterior. El elemento se vuelve totalmente opaco. Admite un primer argumento con los mismos valores que el anterior.

$("#elemento1").fadeIn("slow");

.fadeToggle() : Este método combina los dos anteriores. Tiene el mismo efecto de los anteriores, pero si el elemento está visible, este se oculta, y si está oculto, este se visualiza.

Efecto Fundido

Párrafo fijo, se muestra siempre

Párrafo móvil, Fundido a transparencia al pulsar el botón.

Otro párrafo fijo, también se muestra siempre.

Hemos hecho un ejemplo en el recuadro de la derecha, En el cual el elemento que se oculta tiene un id="f2". Para controlar el elemento que se oculta, hemos puesto un botón con id="boton2". Este es el botón de control:

Y el código jQuery y javascript que hemos utilizado es el siguiente:

$("#boton2").click(function(){
$("#f2").fadeToggle(2000);
});

.fadeTo() : Este método es similar a los anteriores, pero admite un segundo argumento que indica el grado de opacidad que tendrá el elemento tras la transformación:

$("#elemento").fadeTo("slow",0.5);

El primer argumento, igual que en los anteriores, indica la velocidad. Esta puede ser "fast", "slow" o en milisegundos.

El segundo argumento indica el grado de opacidad final. Este se mide en decimales que van desde el 0 (transparencia total), al 1 (opacidad total).

Al contrario que con los anteriores, si indicamos un grado 0 de opacidad, el elemento no desaparece, sino que sigue en su sitio pero invisible.


Efecto deslizamiento

Este efecto consiste en hacer aparecer o desaparecer un elemento mediante un barrido hacia abajo (aparición), o hacia arriba (desaparición). Los métodos jQuery de los que disponemos son los siguientes:

.slideDown() : Este método hace que aparezca un elemento oculto, abriéndose de arriba hacia abajo. Como en los anteriores, podemos ponerle un argumento con los valores "fast", "slow" o un número que indica los milisegundos, el cual indica la velocidad de ejecución.

$("#elemento1").slideDown("slow");

.slideUp() : Este es el método contrario al anterior, y hace que el elemento se oculte progresivamente, de abajo hacia arriba. Tiene también un argumento con el mismo rango de valores, que indica la velocidad de ocultación.

$("#elemento1").slideUp(2000);

.slideToggle() : Este método es una combinación de los dos anteriores. Si el elemento esta oculto se muestra, y si está visible, se oculta. El primer argumento que le pasemos indica la velocidad, y al igual que en los anteriores, admite los mismos valores.

$("#elemento1").slideToggle(2000);

Efecto deslizamiento

Párrafo fijo, se muestra siempre

Párrafo móvil, Deslizamiento hasta desaparición. Pulsa el botón para el efecto.

Otro párrafo fijo, también se muestra siempre.

Hemos hecho un ejemplo en el recuadro de la derecha, En el cual el elemento que se oculta tiene un id="s2". Para controlar el efecto, hemos puesto un botón con id="boton3". Este es el botón de control:

y El código que hemos empleado para hacer el efecto es el siguiente:

$("#boton3").click(function(){
$("#s2").slideToggle(2000);
});

Como ya deberíamos saber, tanto este código como el de todos los efectos anteriores debemos ponerlos dentro de la estructura "document ready" ya explicada en páginas anteriores.

Todos estos métodos admiten como último argumento una función del tipo "callback", la cual se ejecutará siempre después de que el efecto haya acabado.






Seguiremos viendo más efectos especiales en la siguiente página,

Efectos especiales II



Manual de jQuery

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com