Método fadeTo

El método fadeTo cambia suavemente la opacidad de un elemento a un valor dado, en un rango de 0 a 1.

Sintaxis

La duración y la opacidad se especifican en cualquier variante de uso del método. Cambiar la opacidad en un tiempo determinado, 400ms por defecto:

javascript.fadeTo(duración, valor de opacidad);

El tiempo se puede especificar no solo en milisegundos, sino también con las palabras clave slow (600ms) y fast (200ms), cuanto mayor sea el valor, más lenta será la animación:

javascript.fadeTo('slow' o 'fast', valor de opacidad);

También se puede pasar una función de callback como tercer parámetro (opcional) - se ejecutará después de completar la animación:

javascript.fadeTo(duración, valor de opacidad, [función callback]);

También se puede pasar una función de easing y una función de callback (parámetros opcionales) - se ejecutará después de completar la animación:

javascript.fadeTo(duración, valor de opacidad, [función de easing], [función callback]);

Ejemplo

En el siguiente ejemplo, usando el método fadeTo al hacer clic en el botón #hide el elemento con #test se ocultará reduciendo su opacidad a 0.5, y al hacer clic en #show - se mostrará:

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').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

Véase también