En el post de hoy voy a hablar del efecto de jQuery ‘fading’, este efecto de transiciones consta de 4 funciones:
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().
El efecto fadeIn() muestra un elemento (anteriormente oculto) cambiando su opacidad, aquí tenéis su sintaxis extraída de su web oficial.
$(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:
El efecto fadeOut() oculta un elemento variando su opacidad, veamos su sintaxis extraída de su web oficial.
$(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:
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.
$(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:
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:
$(elemento).fadeToggle(speed,easing,callback)
Y ahora va la descripción de sus parámetros (iguales que los anteriores):
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.
<div id="rectangulo" style="padding:10px 10px 10px 10px; background-color:#000; color:#fff;">Rectángulo de ejemplo, que variará de opacidad</div>
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.
<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:
$("#rectangulo").fadeOut("slow");
Y el código de los botones es el siguiente:
<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">
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:
<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:
Termino poniendo el código de los botones:
<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.
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: