Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery fadeIn(), fadeOut(), fadeTo() y fadeToggle(): Transiciones con deslizamientos

En el post de hoy voy a hablar del efecto de jQuery ‘fading’, este efecto de transiciones consta de 4 funciones:

  • fadeIn()
  • fadeOut()
  • fadeTo()
  • fadeToggle()

Son efectos básicos como lo son jQuery show() & hide() y jQuery slideDown(), slideUp() y slideToggle. Estas 4 funciones no solo hacen ocultar o mostrar divs, si no que realizan variaciones de opacidad al ocultar o mostrar los objetos.

Otra función importante es jQuery animate() para realizar animaciones CSS con elelementos del DOM.

El efecto fading consiste en cambiar gradualmente la opacidad de un elemento de nuestra web

Voy a ir comentando la sintaxis de cada ‘efecto fading‘ y al final haré unas demos de ejemplo para ver en funcionamiento todas las posibilidades.

Estos efectos no suelen causar conflitos de jQuery, pero si vuestra web tiene bastantes funciones JQ no dudéis en caso de incompatibilidades usar jQuery noConflict().

Sintaxis de jQuery fadeIn()

El efecto fadeIn() muestra un elemento (anteriormente oculto) cambiando su opacidad, aquí tenéis su sintaxis extraída de su web oficial.

Vemos que la función tiene 3 posibles parámetros además del elemento con el queremos interactuar. Vamos a repasarlos:

  • elemento (obligatorio):  Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
  • speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
  • easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘  (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
  • callback (opcional): Función callback que se ejecutará cuando el efecto se haya completado.

Sintaxis de jQuery fadeOut()

El efecto fadeOut() oculta un elemento variando su opacidad, veamos su sintaxis extraída de su web oficial.

Al igual que fadeIn() la función fadeOut() tiene 3 posibles parámetros además del elemento con el queremos interactuar. Aquí la explicación:

  • elemento (obligatorio):  Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
  • speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
  • easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘  (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
  • callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

Sintaxis de jQuery fadeTo()

El efecto fadeTo() asigna un nivel de opacidad de un elemento dado. Os pongo su sintaxis tal y como viene en su página oficial.

Sintaxis parecida a los 2 efectos anteriores fadeIn() y fadeOut(), os explico las 4 variables además del objeto a manipular que podemos llegar a pasar en esta función:

  • elemento (obligatorio):  Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
  • speed (oblgatorio): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
  • opacity (obligatorio): Nivel opacidad que queremos asignar al elemento, el valor deberá estar entre 0.00 y 1.00.
  • easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘  (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
  • callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

Sintaxis de jQuery fadeToggle()

Esta última sintaxis y trataré el efecto fadeToggle(), la acción de este efecto consiste en alternar los efecto fadeIn() y fadeOut() sin necesidad de andar duplicando líneas de código.

Os explico su sintaxis extraída de su web oficial:

Y ahora va la descripción de sus parámetros (iguales que los anteriores):

  • elemento (obligatorio):  Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
  • speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
  • easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘  (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
  • callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

Resumen del efecto de opacidad fadin de jQuery

Ya hemos visto las 4 funciones de efectos fading, básicamente podemos decir que usando las 4 podemos mostrar, ocultar, asignar opacidad y alternar la aparición y desaparición de elementos de nuestra web variando la opacidad de los mismos.

En las 2 siguientes demos utilizaré este código HTML para mostrar/ocultar un recuadro negro y asi poder ver claramente el los efectos de transición de opacidad.

Ejemplos de jQuery fadeIn() y fadeOut()

Vamos con la primera demo de ejemplo de jQuery fadeIn() y fadeOut, en ella haremos desaparecer y mostrar un elemento variando su opacidad.

Os pongo el código jQuery utilizado en la demo.

Vamos a repasar el código paso a paso:

  • (Línea 1): El primer paso es añadir la librería de jQuery para que funcione nuestro script.
  • (Líneas 6, 9 y 12): Controlamos el click de los botones que tienen los ids mostrar, mostrar2 y mostrar3.
  • (Líneas 7, 10 y 13): Realizamos el efecto fadeIn() por defecto, con 4 segundos de duración y con un mensaje vía alert como callback.
  • (Líneas 17, 20 y 23): Controlamos el click de los botones que tienen los ids ocultar, ocultar2 y ocultar3.
  • (Líneas 18, 21 y 24): Realizamos el efecto fadeOut() por defecto, con 4 segundos de duración y con un mensaje vía alert como callback.
  • IMPORTANTE: Si se quiere merter la duración con los valores «fast» o «slow» sería así:

Y el código de los botones es el siguiente:

Ejemplos de jQuery fadeTo() y fadeToggle()

Vamos a terminar el repaso al efecto fading con una segunda demo de ejemplo de jQuery fadeTo() y fadeToggle(), vamos a asignar un nivel de opacidad y una especie de switch mostrando y ocultado el rectángulo.

Aquí el codigo:

Nuevo repaso a las líneas de código:

  • (Línea 1): El primer paso es añadir la librería de jQuery para que funcione nuestro script.
  • (Líneas 6, 9, 14, 17 y 20): Controlamos el click de los botones que tienen los ids opacidad05, opacidad07, alternar01, alternar02 y alternar03.
  • (Línea 7): Realizamos el efecto fadeTo con duración «slow» y opacidad 0.5.
  • (Línea 10): Realizamos el efecto fadeTo con duración «fast»,opacidad 0.7 y callback sacando un mensaje por pantalla.
  • (Línea 15): Se realiza el efecto fadeToggle, esto hace que aparezca y desparezca el elemento, si estaba visible lo ocultará y viceversa.
  • (Línea 18): Se realiza el efecto fadeToggle con duración 4000 milisegundos con mismo efecto que el punto anterior.
  • (Línea 22): De nuevo se ejecuta el efecto fadeToggle con duración «fast» y callback sacando un mensaje por pantalla.

Termino poniendo el código de los botones:

Espero que estos ejemplos os sirvan de ayuda, y como siempre tenéis los comentarios para cualquier duda, sugerencia o error.

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies