Archivo de la etiqueta: show

Animaciones de Hide y Show con jQuery

Uno de los efectos a la hora de distribuir el contenido dentro de una pagina web es el de ocultar y mostrar, el .show() y el .hide() de jQuery. Este efecto, a mi modo de entender, queda mas visual si le aplicamos un efecto con jQuery UI. Una manera simple de aplicar estos métodos con efecto es el uso de .slideUp() y .fadeOut() para ocultar y .slideDown() y .fadeIn() para mostrar.

El slideUp() lo que hace es ocultar el contenido con un efecto que hace subir el texto hacia el párrafo superior ocultándose, y slideDown() hace aparecer el texto por debajo del párrafo superior.

El .fadeIn() lo que hace es desvanecer el contenido y el fadeOut() lo contrario.

A estos 4 métodos le podemos pasar como parámetro el tiempo en milisegundos que queremos que dure este, o bien slow, normal, fast, o no pasarle ningún parámetro para que lo haga a velocidad normal. Os dejo un ejemplo con estos 4 efectos

https://jsfiddle.net/rubenlacasa/fw5x54qo/

Mas Info: http://api.jquery.com/category/effects/

Anuncios