jQuery deslice hacia la izquierda y muestre

Extendí los jQueryefectos llamados slideRightShow()y slideLeftHide()con un par de funciones que funcionan de manera similar slideUp()y slideDown()como se ve a continuación. Sin embargo, también me gustaría implementar slideLeftShow()y slideRightHide().

Sé que hay bibliotecas importantes que ofrecen este tipo de cosas (me gustaría evitar agregar otro conjunto grande de javascriptarchivos), pero ¿alguien puede proporcionar un ejemplo simple de cómo implementar una slideLeftShow()o una slideRightHide()?

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

La slideRightShowfunción anterior comienza a mostrar la imagen desde el lado izquierdo y avanza hacia el lado derecho. Estoy buscando alguna forma de hacer lo mismo pero empezar por el lado derecho y avanzar hacia el izquierdo . ¡Gracias!

EDITAR

jQuery Interface tiene algo como lo que necesito (básicamente necesito sus funciones de "deslizar hacia la derecha" y "deslizarse hacia la izquierda"), pero no pude hacer que esto funcione con jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Además, su demostración parece estar rota y solo hará una diapositiva una vez antes de arrojar un millón de errores.

Esta función se incluye como parte de jquery ui http://docs.jquery.com/UI/Effects/Slide. Si desea ampliarla con sus propios nombres, puede utilizarla.

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});

necesitará las siguientes referencias

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

No olvides el relleno y los márgenes ...

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}

Con los argumentos de velocidad / devolución de llamada agregados, es un reemplazo completo para slideUp()y slideDown().

Puede agregar una nueva función a su biblioteca jQuery agregando estas líneas en su propio archivo de script y puede usar fácilmente fadeSlideRight()y fadeSlideLeft().

Nota: puede cambiar el ancho de la animación como desee en una instancia de 750px.

$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) && fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) && fn.call(this);
    });
}

Y si desea variar la velocidad e incluir devoluciones de llamada, simplemente agréguelas así:

        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });