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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s