name - jQuery desliza hacia la izquierda y muestra

name jquery val()

Question

slideRightShow() efectos de jQuery llamados slideRightShow() y slideLeftHide() con un par de funciones que funcionan de forma 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 importantes que ofrecen este tipo de cosas (me gustaría evitar agregar otro conjunto grande de archivos javascript ), pero ¿alguien puede 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

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

Answer 1

Esta característica se incluye como parte de jquery ui http://docs.jquery.com/UI/Effects/Slide Si desea ampliarla con sus propios nombres, puede usarla.

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ás 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>

Answer 2

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 de velocidad / devolución de llamada agregados, es un reemplazo slideUp() para slideUp() y slideDown() .

Answer 3

Puede agregar una nueva función a su biblioteca jQuery añadiendo esta línea en su propio archivo de script y puede usar fadeSlideRight() y fadeSlideLeft() .

Nota: puede cambiar el ancho de la animación como quiera 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 incluir devoluciones de llamada simplemente agréguelas de esta manera:

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