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

Visitas el mes pasado: 143

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 (XII)

Efectos especiales II

imagen jquery

Efectos con CSS

Los efectos especiales que se pueden hacer utilizando los estilos CSS consisten en el cambio del valor indicado por una propiedad de forma progresiva.

Para ello jQuery utiliza el método .animate(), el cual sólo puede aplicarse a propiedades CSS cuyos valores sean numéricos.

La sintaxis utilizada para este método tiene la siguiente forma:

$("selector").animate({<estilos css>},velocidad,función callback)

Veamos en qué consiste esto: en primer lugar ponemos el objeto jquery con su selector, y despues el método "animate": $("selector").animate. Veamos ahora los argumentos de este método: (lo que escribimos dentro del paréntesis).

Veamos un ejemplo:

$("#elemento").animate({"width":"50px","height":"30px","fontSize":"25px"},"2000);

En este ejemplo hay tres propiedades que variarán del estado inicial al indicado, su variación se producirá de forma progresiva, tardando 2000 milisegundos.

Las propiedades compuestas CSS deben escribirse en su forma de javascript, y no en su forma habitual CSS, es decir escribiremos por ejemplo fontSize, en lugar de font-size.

Para mover un elemento en la página, este necesitará previamente tener declarada la propiedad position con uno de estos valores: relative, absolute, fixed. Sólo así se le pueden aplicar las propiedades top, bottom, left, right que muevan el elemento dentro de la página.

Las propiedades que no tengan valores numéricos no pueden hacer un cambio progresivo que cree una animación. por ejemplo podremos hacer animación con fontSize, pero no con fontFamily.

Veamos aquí un ejemplo en el que hemos cambiado varias propiedades para conseguir una animación:

¡¡Hola!!

Para conseguir esta animación primero creamos un div con la caja grande. A este div le hemos puesto una position: relative. Luego, dentro creamos otro div al cual le hemos dado el siguiente estilo CSS inicial:

#caja1 {width: 70px; height: 30px; position: absolute; left: 20px; top: 10px; background-Color: #c9a88c; font-size: 14px; }

Después le aplicamos el código javascript - jQuery, el cual será el siguiente:

$(document).ready(function(){ 
estado=0;
$("#boton1").click(function(){
   if (estado==0) {
      $("#caja1").animate({"width":"160px","height":"70px","fontSize":"40px","left":"450px"},2500);
      estado=1;
      }
   else {
      $("#caja1").animate({"width":"70px","height":"30px","fontSize":"14px","left":"20px"},2500);
      estado=0;
      }
   });
});

El método animate() no sirve para hacer variaciones en el color de un elemento es decir no permite pasar de un color a otro progresivamente. Sin embargo existe un plugin que si lo añadimos a nuestro sitio, nos permitirá hacer animaciones de color. este lo podemos descargar en http://www.bitstorm.org/jquery/color-animation/

Este plugin consiste en un archivo javascript, que lo copiaremos y lo guardaremos en nuestro sitio. Después pondremos el link de este archivo, siempre después del link al archivo javascript de jquery.

Nosotros hemos puesto el archivo en nuestra página, y hemos hecho un pequeño ejemplo para ver cómo funciona. Así hemos puesto tres botones para cambiar de color el recuadro de la derecha:

... ...

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

$("#boton2").click(function(){
   $("#capa1").animate({"backgroundColor":"#ff0000"},2500);    
   });
$("#boton3").click(function(){
   $("#capa1").animate({"backgroundColor":"#00ff00"},2500);    
   });
$("#boton4").click(function(){
   $("#capa1").animate({"backgroundColor":"#0000ff"},2500);    
   });


Cola de efectos

Si llamamos a varias funciones de efecto, una tras otra, éstas no se ejecutan a la vez, sino que cada una de ellas espera a que la anterior haya acabado para ponerse en marcha. De esta manera se crea una "cola de efectos", que va guardando las funciones para ser ejecutadas una detrás de otra.

Para indicar varias funciones de efectos en un elemento podemos escribirlas una detrás de otra o podemos pònerlas también de la siguiente manera:

$("#capa1").fadeIn(2000).fadeOut(2000).slideDown(2000).slideUp(2000);

Esto hará que en el elemento indicado se ejecuten las cuatro funciones que le siguen una detrás de otra.

El método .queue() permite controlar la cola de efectos de un elemento:

ver=$("#capa1").queue();

Esta línea da como resultado un array que contiene todas las funciones que tienen que ejecutarse en la cola de efectos.

El método .queue() admite un primer argumento opcional que será un nombre que le demos a la cola de efectos. Esto es útil si queremos poner más de una cola de efectos en un elemento.

Admite también como argumento una función tipo "callback". Esta función se colocará al final de la cola, para ejecutarse después de la última.

$("#capa1").queue(function(seguir){
$(this).css("color","red");
});
seguir();

La función que queremos que se ejecute la última, debe llevar un argumento, el cual es una función que debemos llamar desde una parte posterior del código para que se ejecute. Nosotros le hemos puesto "seguir". De no hacerse así la función no se ejecutará.

Esto podemos hacerlo también sin pasarle el argumento y utilizando el método .dequeue() :

$("#capa1").queue(function(){
$(this).css("color","red");
});
$("#capa1").dequeue();

El método .dequeue() puede llevar como argumento el nombre de la cola de efectos.

La cola de efectos añade automáticamente todos los métodos de efectos, los métodos que no son de efectos no se añaden automáticamente, para añadirlos debemos hacerlo tal como hemos visto aquí, de hecho en este ejemplo, el método .css no es un método de efectos, sin embargo quedará añadido a la cola de efectos.


Métodos .stop() y .delay()

el método .delay(), permite parar la cola de efectos durante el tiempo indicado en el parámetro:

$("#capa1").delay(5000);

Este método, colocado entre otros métodos de efectos, hace que haya un tiempo de espera entre el efecto anterior y el siguiente. El tiempo viene determinado por el argumento que se le pasa. Sus valores pueden ser "fast", "slow" o un número que expresa los milisegundos.

.

El método .stop() hace que se pare la ejecución de la cola de efectos. Puede llevar o no varios argumentos opcionales, los cuales realizan las siguientes funciones:

$("#capa1").stop();

Esta línea para el efecto que se está ejecutando, y la cola pasa e ejecutar el siguiente efecto. La cola por tanto no se para, sino que simplemente para el efecto actual.

$("#capa1").stop(true);

Al poner un primer argumento true, la cola se detiene completamente, de manera que se borran todos los efectos posteriores y los efectos se acaban. Si pasamos como argumento false el efecto es como en el caso anterior (igual que sin argumentos).

Un segundo argumento, también booleano, indica si al pararse el efecto, este se queda tal y como está, o si va directamente al final del mismo de forma instantánea. Por ejemplo si se está ejecutando un efecto fadeOut (transparencia y desparición) si indicamos como segundo argumento "false" este se quedará como está, si indicamos "true", este pasará directamente al final del efecto de forma instantánea.

$("#capa1").stop(true,true);

Aquí acaba el efecto que tenemos en marcha de forma instantánea y elimina los demás efectos que quedan en la cola.

La propiedad .length permite saber el número de funciones que quedan en una cola:

num=$("#capa1").queue().length;

Aquí la variable num será un número que indique el número de funciones o métodos que quedan todavía por ejecutarse.






En la proxima página veremos otros métodos que pueden usarse con jQuery

Otros métodos



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