Método fadeIn
El método fadeIn muestra gradualmente elementos
ocultos, haciéndolos opacos. Ocultar
elementos se puede hacer con el método
fadeOut,
haciéndolos transparentes.
Sintaxis
Visualización durante un tiempo determinado,
400ms por defecto:
.fadeIn(duración);
El tiempo se puede especificar no solo en milisegundos,
sino también con palabras clave slow (600ms)
y fast (200ms), cuanto mayor sea el valor,
más lenta será la animación:
.fadeIn('slow' o 'fast');
Si no se especifican parámetros - no habrá animación, los elementos se mostrarán instantáneamente:
.fadeIn();
También se puede pasar una función de easing como segundo parámetro, y una función callback como tercer parámetro - se ejecutará después de completar la animación. Ambos parámetros son opcionales:
.fadeIn(duración, [función de easing], [función callback]);
Se pueden pasar varias opciones al método, en forma de objeto JavaScript, que contenga pares clave: valor:
.fadeIn(opciones);
Dicho objeto puede pasar los siguientes
parámetros y funciones - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. La descripción
de estos parámetros la puedes ver para el método
animate. Por ejemplo,
establezcamos la duración y la función de easing:
.fadeIn( {duration: 800, easing: easeInSine} );
Ejemplo
En el siguiente ejemplo, al hacer clic en el botón
#hide el elemento con #test se
ocultará usando el método fadeOut,
y al hacer clic en el botón #show - se mostrará, con
fadeIn. También estableceremos
la velocidad en 1000ms:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Ejemplo
Y en el siguiente ejemplo, después de finalizar
la animación al mostrar el elemento #test
mostraremos un mensaje
con el texto '!', y al ocultarlo
con el texto '?':
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
