sábado, 16 de febrero de 2013

Efectos en jQuery

Show Hide

Dentro de los efectos con los que contamos en jQuery, se encuentra el de mostrar y oculpar cualquier elementovisual del documento DOM. Podremos hacer en forma sencilla animaciones que serían imposibles con sólo HTML.

Toogle

El efecto de toggle nos permitirá ocultar y mostrar un elemento del documento DOM de manera muy sencilla, permitiéndonos  hacer efectos interesantes con muy poco código.

Fade-in Fade-out

También contamos con el efecto de desvanecimiento, conocidos como fade-in y fade-out. Como parámetro podemos indicarle la velocidad del efecto con parámetros "slow" y "fast", asi como en número de milisegundos.

slideUp y slideDown

Otro efecto que podremos realizar con casi nada de código, es del deslizamiento de cualquier elemento hacia arriba y hacia abajo. Al igual que los otros efectos, podremos controlar su velocidad con los parámetos "slow" y "fast", asi como manejar el tiempo en milisegundos.

animate

El efecto animate es uno de los más poderosos en jQuery, pode podemos tomar una o varias atributos de un elementos y animarlos.

Con el efecto animate pomdeos animar más de una propiedad. De hecho podemos animar casi cualquier propiedad, a excepción de la propiedad de color, donde necesitamos otra librería. Si deseamos animar alguna propiedad css con guión, por ejemlo padding-top, la tenemos que convertir a CamelCase, como paddingTop. 

El efecto animate lo podemos manejar con valores relativos, es decir, pequeños incrementos que se pueden sumar o restar cuando tenemos alguna propiedad numérica. Usaremos los operadores += para incrementar y -= para decrementar.

Por medio del método animate, podemos tener una pila de animaciones y jQuery las ejecutaría de una por una, con lo cual podemos hacer animaciones más elaboradas.

stop

El método stop(), en jQuery, se utiliza para detener una animación o efecto antes de que se termine.

El método stop () funciona para todas las funciones de efectos jQuery, incluyendo animaciones de deslizamiento, la decoloración ylas animaciones customizadas.
El parámetro opcional (StopAll) especifica si también la cola de animación debe ser detenida o no. El valor predeterminado es falso, lo que significa que sólo la animación activa se detendrá, permitiendo que las animaciones en cola para ser realizado posteriormente.

El parámetro opcional
goToEnd especifica si o no para completar la animación actual inmediatamente. El valor predeterminado es false.

Así que, por defecto, el método stop () mata a la animación actual que se realiza en el elemento seleccionado.




No hay comentarios:

Publicar un comentario