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:

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

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

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

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

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

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

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

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

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

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

Véase también