Método show
El método show muestra suavemente elementos
ocultos. Los elementos se pueden ocultar con el método
hide.
Sintaxis
Mostrar durante un tiempo determinado en milisegundos,
400ms por defecto:
.show(duración);
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:
.show('slow' o 'fast');
Si no se especifican parámetros, no habrá animación, los elementos se mostrarán instantáneamente:
.show();
También se puede pasar una función de easing como segundo parámetro, y una función callback como tercer parámetro, que se ejecutará después de completar la animación. Ambos parámetros son opcionales:
.show(duración, [función de easing], [función callback]);
Se pueden pasar varias opciones al método, en forma de objeto JavaScript, que contiene pares clave: valor:
.show(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:
.show( {duration: 800, easing: easeInSine} );
Ejemplo
Después de hacer clic en el botón, mostremos suavemente
un párrafo oculto usando el método show. Pasando
la palabra clave slow, estableceremos la velocidad
a 600ms. Después de que finalice la animación, mostraremos en
la consola 'Animation complete':
<button>show text</button>
<p style="display: none">text</p>
$('button').click(function() {
$('p').show('slow', function() {
console.log('Animation complete')
});
});
