jQuery desliza a la izquierda y muestra

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

Sé que hay bibliotecas sustanciales que ofrecen este tipo de cosas (me gustaría evitar agregar otro gran conjunto de archivos javascript), pero ¿puede alguien proporcionar un ejemplo simple de cómo implementar slideLeftShow() o 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 función anterior slideRightShow comienza a mostrar la imagen desde el lado izquierdo y avanza hacia el lado derecho. Estoy buscando alguna manera de hacer lo mismo, pero comenzar desde el lado derecho y avanzar hacia la izquierda. ¡Gracias!

EDITAR

La interfaz de jQuery tiene algo como lo que necesito (básicamente necesito sus funciones" slide in right "y" slide out left"), pero no pude hacer que esto funcione con jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . También, su demo parece roto así como solo hará una diapositiva una vez antes de lanzar un millón de errores.

Author: Afnan Bashir, 2009-02-06
Source

4 answers

Esta característica se incluye como parte de jquery ui http://docs.jquery.com/UI/Effects/Slide si quieres extenderlo con tus propios nombres puedes usar esto.

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>
 184
Author: bendewey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-22 09:43:02

No olvide 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 speed/callback agregados, es un reemplazo completo para slideUp() y slideDown().

 32
Author: vdboor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-04 12:37:31

Puede agregar nuevas funciones 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 a su gusto 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);
    });
}
 9
Author: thebhatta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-10 07:32:17

Y si quieres variar la velocidad e incluir callbacks simplemente agrégalas 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);
                });
            }
        });
 5
Author: Steve Grove,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-31 00:18:45