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:

javascript.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:

javascript.fadeOut('slow' o 'fast');

Si no se especifican parámetros - no habrá animación, los elementos se ocultarán instantáneamente:

javascript.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:

javascript.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:

javascript.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:

javascript.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:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#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 '?':

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Ver también