jQuery deslice hacia la izquierda y muestre


111

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.



Respuestas:


185

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>

¡Hola! Estoy buscando lo inverso de lo que ha implementado allí. Básicamente, cuando uso lo que tengo arriba para mostrar un elemento, la parte izquierda aparece primero y avanza hacia la derecha. Estoy tratando de que comience por el lado derecho y avance hacia el izquierdo.
Wickethewok

1
funciona si flota el elemento a la derecha. De otra manera. es posible que desee animar la propiedad izquierda y mover el elemento a medida que lo encoge.
bendewey

1
Cambiar el elemento para que flote "a la derecha" no invirtió la diapositiva para mí. Aclaré arriba si eso ayuda.
Wickethewok

2
Muchas gracias! No sabía que esto era parte de los efectos de jQuery. ¡Daría +2 si pudiera!
Wickethewok

4
El enlace de la fuente de las dos secuencias de comandos de la interfaz de usuario ahora es: jquery-ui.googlecode.com/svn/tags/latest/ui/… y " jquery-ui.googlecode.com/svn/tags/latest/ui/…
Muleskinner

34

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().


¿Cómo hacer que hagan el mismo efecto con un deslizamiento correcto?
Jayant Varshney

@JayantVarshney: asegúrese de que el bloque esté alineado a la derecha, posiblemente con algún bloque interno. Este código solo reduce el ancho. Si su CSS puede manejar eso, tendrá una diapositiva correcta
vdboor

Gracias ... Pero quiero ambos efectos en el mismo div ... como abrir de derecha a izquierda y luego cerrar de izquierda a derecha o viceversa ...
Jayant Varshney

Bueno, entonces, ¿qué tal cambiar de clase en la devolución de llamada de finalización? :-)
vdboor

Gracias, utilicé animaciones CSS3 para lograr esta funcionalidad
Jayant Varshney

9

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

1
Esto es exactamente lo que necesitaba sin incluir jQuery UI. Acabo de agregar la opacidad y el ancho como parámetros. ... = function(opacity, speed, width, fn) {...}
Dylan Valade

1
Esta es la mejor solución con diferencia. No es necesario agregar más bibliotecas. Gracias.
hosseio

5

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);
                });
            }
        });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.