Efecto slide y fade horizontal con jQuery

jQuery incluye algunos efectos para ocultar y mostrar como el .slideUp(),  .slideDown() y .slideToggle(), . fadeUp(),  .fadeDown(), . fadeToggle(), todos estos efectos se ejecutan de manera vertical, pero que pasa si queremos que esos efectos se ejecuten de manera horizontal. Lo podemos hacer utilizando CSS y .animate() de jQuery, aqui los ejemplos:

Slide horizontal

El CSS que vamos a ocupar es el siguiente. creamos .contenedor con el posicionamiento relativo,  y #slideIzq el cual tendrá el posicionamiento absoluto y la posicion left a 0 si queremos que se oculte por la izquierda y la posicion right a 0 si queremos que se oculte por la derecha.

CSS

.contenedor{
    width:500px;
    position: relative;
}

#slideIzq{
    position: absolute;
    left:0;  /*se oculta por la izquierda*/
    /*right: 0;  se oculta por la derecha */
}

jQuery

El codigo de jQuery es el siguiente: Para conseguir el efecto de slide horizontal vamos a animar la propiedad width con algunos de los siguientes valores: show: para mostrar  el elemento, hide: para ocultar el elemento y  toggle: para mostrar u ocultar el elemento.

 

$(document).ready(function() {
    $('#btnSlide').click(function() {
        $("#slideIzq").animate({
            width: "toggle"
            /*
            width: "show"
            width: "hide"
            */
        });
    });
});

Fade horizontal

Para conseguir el efecto fade solo tenemos que animar la propiedad opacity y al igual que width podemos colocar show, hide o toggle

 

$(document).ready(function() {
    $('#btnFade').click(function() {
        $("#fadeIzq").animate({
            width: "toggle",
            opacity: "toggle"
        });
    });
});

En los ejemplos anteriores cuando se muestra u oculta el elemento, el contenido de esté se va ajustando, para corregir el  efecto podemos hacerlo de la siguiente forma, en vez de animar la propiedad width podemos animar la propiedad left o right, dependiendo si queremos que se oculte hacia la izquierda o derecha. Aquí el ejemplo:

$('#btnfade').click(function() {
    $("#fadeIzq").animate({
        left: parseInt($("#fadeIzq").css("left"))== 0?"-="+$("#fadeIzq").outerWidth():0,
        opacity:parseInt("#fadeIzq").css("opacity")) == 1 ? 0 : 1
    });
});

Para establecer el valor de la propiedad left, primero verificamos su valor actual, si left  es igual a o entonces a left le restamos el ancho incluyendo margenes y padding  lo que hara que se oculte. Ahora bien si el valor no es igual a cero eso quiere decir que el elemento esta oculto entonces solo establecemos la propiedad left a 0 para que se muestre. Si queremos hacer el efecto con desvanecimiento hacemos lo mismo con la propiedad opacity: la cual ira cambiando de 0 a 1 dependiendo si se esta mostrando u ocultando. Con respecto al CSS solo tenemos que agregar la propiedad overflow: hidden a la clase contenedor para que a la hora de ir ocultando el elemento este no se desborde.

4 comentarios en “Efecto slide y fade horizontal con jQuery”

  1. Arturo dice:

    Muy buen post, me ayudo mucho.

    Muchas Gracias =)

    Saludos.

  2. Mario dice:

    Muchas gracias me has salvado el culo 😉
    Solo un detalle, si haces click varias veces seguidas sobre el botón, los div se desincronizan y solo se queda uno en pantalla.
    ¡

  3. Carlos dice:

    Gracias, fue el único código que me funcionó de todos los que vi, saludos.

  4. Muchas gracias el aporte. Pero solo una duda más. ¿Cómo harías para poner un div a la derecha del slideIzq y según este se esconda, ocupe su espacio?

Deja un comentario