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:
.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:
.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:
.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:
.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á:
<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').fadeTo(1000, 1);
});
$('#hide').on('click', function() {
$('#test').fadeTo(1000, 0.5);
});
Véase también
-
método
fadeToggle,
que cambia la opacidad de los elementos -
método
fadeIn,
que muestra gradualmente elementos ocultos, haciéndolos opacos -
método
animate,
que anima las propiedades de los elementos
