Mostrar capa / tabla oculta con fadeIn, slideDown, show, css en jQuery

Ayer os explicábamos las formas posibles de ocultar una capa en jQuery, las distintas funciones posibles.

Hoy vamos a explicar los efectos de los que disponemos en jQuery para mostrar una capa, en vez de el fadeIn como os expliqué anteriormente.

Primero vamos a empezar con la función fadeIn. Esta función se encarga de modificar el nivel de opacidad de la capa / tabla de 0 a 100 en el tiempo que nosotros le indiquemos. Como en el ejemplo con 2 segundos:

$('#div_fadeIn').fadeIn(2000);

La función slideDown se encarga de mostrar la capa / tabla aumentando su altura, en el tiempo que nosotros le indiquemos. En este caso la capa pasa de tener 0 pixeles de alto a tener 450, creando un efecto muy elegante.

$('#div_slideDown').slideDown(2000);

La función show por defecto lo que hace es mostrar la capa / tabla modificando el ancho / alto de esta, comenzando por la esquina superior izquierda, terminando por la esquina inferior derecha. En este caso pasa de tener 0 pixeles de ancho y 0 de alto a tener 600 pixeles de ancho y 450 pixeles de alto. Es bastante parecido a fadeIn.

$('#div_show').show(2000);

Y para terminar la función css. Con esta función cambiamos el display:none a display:block sin efecto ninguno.

$('#div_css').css("display","block");

Aquí tenéis un ejemplo con las 5 funciones.

• Ejemplo