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.
