jQuery slide left e show

Ho esteso gli effetti jQuery chiamati slideRightShow() e slideLeftHide() con un paio di funzioni che funzionano in modo simile a slideUp() e slideDown() come mostrato di seguito. Tuttavia, vorrei anche implementare slideLeftShow() e slideRightHide() .

So che ci sono librerie sostanziali che offrono questo tipo di cose (vorrei evitare di aggiungere un altro grande set di file javascript ), ma qualcuno può fornire un semplice esempio di come implementare 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 funzione slideRightShow sopra inizia a mostrare l’immagine dal lato sinistro e progredisce verso il lato destro. Sto cercando un modo per fare la stessa cosa, ma parti dal lato destro e progredisci verso sinistra . Grazie!

MODIFICARE

jQuery Interface ha qualcosa di cui ho bisogno (fondamentalmente ho bisogno delle loro funzioni “slide in right” e “slide out left”), ma non ho potuto farlo funzionare con jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Inoltre, la loro demo sembra rotta e farà solo una slide una volta prima di lanciare un milione di errori.

    Questa funzione è inclusa come parte di jquery ui http://docs.jquery.com/UI/Effects/Slide se si desidera estenderla con i propri nomi è ansible utilizzarla.

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

    avrai bisogno dei seguenti riferimenti

        

    Non dimenticare l’imbottitura e i margini …

     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 gli argomenti di velocità / callback aggiunti, è un sostituto slideUp() per slideUp() e slideDown() .

    Puoi aggiungere una nuova funzione alla tua libreria jQuery aggiungendo queste righe sul tuo file di script e puoi facilmente utilizzare fadeSlideRight() e fadeSlideLeft() .

    Nota: puoi modificare la larghezza dell’animazione a piacere di 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); }); } 

    E se vuoi variare la velocità e includere i callback, aggiungili semplicemente in questo modo:

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