jQuery deslizante hacia la izquierda y el espectáculo

Question

he ampliado 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 sustanciales bibliotecas que ofrecen este tipo de cosas (me gustaría evitar la adición de otro gran conjunto de archivos javascript), pero puede alguien dar un ejemplo sencillo de cómo poner en práctica ya sea 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 slideRightShow anterior empieza a mostrar la imagen desde el lado izquierdo y que avanza hacia el lado derecho. Estoy buscando una manera de hacer lo mismo, pero empezar desde el lado derecho y el progreso hacia la izquierda . Gracias!

editar

jQuery interfaz tiene algo que necesito (I básicamente necesito su "caída en la derecha" y "izquierda" deslice hacia afuera funciones), pero no pude conseguir que esto funcione con jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Además, su demo parece roto, así como sólo lo hará una diapositiva una vez antes de lanzar un millón de errores.

Answer 1

Esta característica se incluye como parte de la interfaz de usuario jquery http://docs.jquery.com/UI / Efectos / Slide si desea extenderlo con sus propios nombres puede utilizar este.

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);
    });
  }
});

se necesitan los 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>

Answer 2

No se 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 de devolución de llamada / velocidad añaden, es un completo reemplazo directo para slideUp() y slideDown().

Answer 3

Puede añadir nuevas funciones a su biblioteca jQuery añadiendo estas líneas en su propio archivo de secuencia de comandos y puede utilizar simplemente fadeSlideRight() y fadeSlideLeft().

Nota:. Puede cambiar el ancho de la animación como desee 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);
    });
}

Answer 4

Y si desea variar la velocidad e incluye devoluciones de llamada simplemente añadirlos como esto:

        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);
                });
            }
        });