Sencillo y rápido post en que vamos a ver las diferentes funciones de efectos en jQuery que podemos usar en nuestras webs.
Tras revisar la documentación oficial estos son los efectos más usados en jQuery:
- animate()
- queue(), dequeue() y clearQueue()
- delay()
- fadeIn(), fadeOut(), fadeTo() y fadeToggle()
- finish()
- hide() y show()
- slideDown(), slideUp() y slideToggle()
- stop()
- toggle()
La sucesión concatenada de efectos en jQuery recibe el nombre de chaining.
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:
Ahora repasamos la funcionalidad de cada una de ellas.
jQuery animate()
Con jQuery animate() podemos hacer efectos de animación modificando las propiedades CSS en tiempo real en los elementos del DOM de nuestra web.
Os enumero los grupos de propiedades que se pueden modificar:
- Propiedades del fondo: backgroundPositionX y backgroundPositionY.
- Propiedades de bordes: outlineWidth, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth y borderSpacing.
- Los márgenes de elementos: margin, marginBottom, marginLeft, marginRight y marginTop.
- Los márgenes internos: padding, paddingBottom, paddingLeft, paddingRight y paddingTop.
- Altura y anchura: height, width, maxHeight, maxWidth, minHeight y minWidth.
- Coordenadas: bottom, left, right y top.
- Propiedades de párrafo: fontSize, letterSpacing, wordSpacing, lineHeight y textIndent.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery queue(), dequeue() y clearQueue()
Las funciones básicas para trabajar con colas en jQuery son las siguientes:
- queue()
- dequeue()
- clearQueue()
Una cola es una o varias funciones esperando ser ejecutadas. El orden de las colas que vamos a ver es FIFO –> first in, first out. Es decir, la primera función encolada es la primera en salir
La funcionalidad de estas es acceder y manipular en una cola de procesos cualquier función esperando a ser ejecutada.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery delay()
La funcionalidad de delay() es la de retrasar la ejecución de una función esperando a ejecutarse en una cola.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery fadeIn(), fadeOut(), fadeTo() y fadeToggle()
Sencillamente podemos decir que usando las 4 funciones podemos mostrar, ocultar, asignar opacidad y alternar la aparición y desaparición de elementos de nuestra web variando la opacidad de los mismos.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery finish()
finish() que sirve para finalizar y detener las funciones y colas en ejecución. Es muy similar a la función stop().
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery show() y hide()
show() y hide() se usan para mostrar y ocultar elementos del DOM de la web, mayoritariamente suelen ser divs, ids, clases, imágenes, elementos de formularios, etiquetas…
El uso combinado de estas 2 funciones de jQuery emula la funcionalidad básica de jQuery toggle() que muestra y oculta elementos.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery slideDown(), slideUp() y slideToggle()
Estas funciones son muy usadas para hacer slideshows, sliders o el conocido efecto acordeón. Se pueden combinar con otras funciones de jQuery los efectos fading (fadeIn, fadeTo, fadeToggle, fadeOut), con show() y hide() o con jQuery animate() para realizar animaciones CSS con elelementos del DOM.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery stop()
stop() detiene las funciones o efectos que se estén ejecutando antes de que finalicen.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post:
jQuery toggle()
toggle() se usa mayoritariamente en casos para ocultar y mostrar elementos de una página web, aunque también funciona como switch entre 2 funciones.
Si queréis ver su sintaxis y ejemplos os recomiendo leer este post: