Método fadeToggle

El método fadeToggle alterna suavemente mostrar u ocultar elementos, animando su opacidad.

Sintaxis

Visualización/ocultación durante un tiempo determinado, 400ms por defecto:

.fadeToggle(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:

.fadeToggle('slow' o 'fast');

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

.fadeToggle();

También se puede pasar una función de easing como segundo parámetro, y una función callback como tercero - se ejecutará después de completar la animación. Ambos parámetros son opcionales:

.fadeToggle(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:

.fadeToggle(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 se puede consultar para el método animate. Por ejemplo, establezcamos la duración y la función de easing:

.fadeToggle( {duration: 800, easing: easeInSine} );

Ejemplo

En el siguiente ejemplo, al hacer clic por primera vez en el botón #toggle el elemento con #test será ocultado, y al hacer clic nuevamente - será mostrado. Para esto utilizamos el método fadeToggle. También estableceremos la velocidad en 1000ms y el valor de la función de easing en linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Véase también

método slideToggle,
que alterna la visualización/ocultación suave de elementos
método fadeTo,
que cambia la opacidad de los elementos
método toggle,
que alterna la visualización/ocultación suave de elementos
método animate,
que anima las propiedades de los elementos