Please enable / Por favor activa JavaScript!
Por favor activa el Javascript![ ? ]

Fade con jQuery (teoria y ejemplos)  Fade con jQuery (teoria y ejemplos)

Valoración de éste post
4.96 / 5 de 23 votos



Mensajes: 1237


Puntos totales:

Enhorabuena!

32





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 jQuery 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.

Código: Seleccionar todo
$(elemento).fadeIn(speed,easing,callback)


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.

Código: Seleccionar todo
$(elemento).fadeOut(speed,easing,callback)


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.

Código: Seleccionar todo
$(elemento).fadeTo(speed,opacity,easing,callback)


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:

Código: Seleccionar todo
$(elemento).fadeToggle(speed,easing,callback)


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.

Código: Seleccionar todo
<div id="rectangulo" style="padding:10px 10px 10px 10px; background-color:#000; color:#fff;">Rectángulo de ejemplo, que variará de opacidad</div>


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.

Código: Seleccionar todo
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<script type="text/javascript">
   $(document).ready(function() {
      $("#mostrar").click(function(event) {
         $("#rectangulo").fadeIn();
      });
      $("#mostrar2").click(function(event) {
         $("#rectangulo").fadeIn(4000);
      });
      $("#mostrar3").click(function(event) {
         $("#rectangulo").fadeIn(4000, function() {
            alert ('Efecto fadeIn terminado!');
            });
      });
      $("#ocultar").click(function(event) {
         $("#rectangulo").fadeOut();
      });
      $("#ocultar2").click(function(event) {
         $("#rectangulo").fadeOut(4000);
      });
      $("#ocultar3").click(function(event) {
         $("#rectangulo").fadeOut(4000, function() {
            alert ('Efecto fadeOut terminado!');
            });
      });
   });
</script>


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

Código: Seleccionar todo
$("#rectangulo").fadeOut("slow");


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

Código: Seleccionar todo
<input type="button" id="mostrar" value="Mostrar con fadeIn()">
<input type="button" id="ocultar" value="Ocultar con fadeOut()">
<input type="button" id="mostrar2" value="Mostrar con fadeIn() en 4000 milisengos">
<input type="button" id="ocultar2" value="Ocultar fadeOut() en 4000 milisegundos">
<input type="button" id="mostrar3" value="Mostrar con fadeIn() en 4000 milisengos y callback">
<input type="button" id="ocultar3" value="Ocultar fadeOut() en 4000 milisegundos y callback">
<input type="button" id="mostrar" value="Mostrar con fadeIn()">


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:

Código: Seleccionar todo
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
      $("#opacidad05").click(function(event) {
         $("#rectangulo").fadeTo("slow",0.5);
      });
      $("#opacidad07").click(function(event) {
         $("#rectangulo").fadeTo("fast",0.7, function() {
            alert ('Efecto fadeTo terminado!');
            });
      });
      $("#alternar01").click(function(event) {
         $("#rectangulo").fadeToggle();
      });
      $("#alternar02").click(function(event) {
         $("#rectangulo").fadeToggle(4000);
      });
      $("#alternar03").click(function(event) {
         $("#rectangulo").fadeToggle("fast", function() {
            alert ('Efecto fadeToggle terminado!');
            });
      });
   });
</script>


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:

Código: Seleccionar todo
<input type="button" id="opacidad05" value="Asignar un 0.5 de opacidad con fadeTo() con duración 'slow'">
<input type="button" id="opacidad07" value="Asignar un 0.7 de opacidad con fadeTo() con duración 'fast' con callback">
<input type="button" id="alternar01" value="Alternar opacidad con con fadeToggle()">
<input type="button" id="alternar02" value="Alternar opacidad durante 4000 milisengos con fadeToggle()">
<input type="button" id="alternar03" value="Alternar opacidad con duración 'fast' con fadeToggle() con callback">


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





No te pierdas el tema anterior: Cómo programar para emprendedores - Javascript

Salta al siguiente tema: Curso de visualización de datos en tiempo real con D3.JS

Quizás también te interese:
Si has encontrado información útil en Exaforo, ayúdanos a seguir creciendo. Muchas gracias por confiar en nosotros!


Volver a Javascript/Java/JSP...


cron