Método fadeOut
El método fadeOut oculta elementos suavemente.
Mostrar elementos se puede hacer con el método
fadeIn,
haciéndolos opacos.
Sintaxis
Mostrar durante un tiempo determinado,
400ms por defecto:
.fadeOut(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:
.fadeOut('slow' o 'fast');
Si no se especifican parámetros - no habrá animación, los elementos se ocultarán instantáneamente:
.fadeOut();
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:
.fadeOut(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:
.fadeOut(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:
.fadeOut( {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('?');
});
});
