Ocultar una capa / tabla con fadeOut, slideUp, hide, css en jQuery

2 nov

Esto ya lo explicamos hace tiempo, como ocultar una capa / tabla y como mostrarla con jQuery. El problema está en que a día de hoy el 90% de las visitas viene de Google, y como me han comentado un par de usuarios, no han encontrado el tutorial.

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

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

$('#div_fadeOut').fadeOut(2000);

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

$('#div_slideUp').slideUp(2000);

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

$('#div_hide').hide(2000);

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

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

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

Sin comentarios todavía

Agregar un nuevo comentario