Efecto slide y fade horizontal con jQuery

Stay hungry, stay foolish

Steve Jobs

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.