jQuery scorri a sinistra e mostra

Ho esteso gli jQueryeffetti chiamati slideRightShow()e slideLeftHide()con un paio di funzioni che funzionano in modo simile 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 insieme di javascriptfile), 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 slideRightShowfunzione precedente inizia a mostrare l'immagine dal lato sinistro e procede verso il lato destro. Sto cercando un modo per fare la stessa cosa ma iniziare dal lato destro e progredire verso sinistra . Grazie!

MODIFICARE

jQuery Interface ha qualcosa del genere di cui ho bisogno (fondamentalmente ho bisogno delle loro funzioni "slide in right" e "slide out left"), ma non sono riuscito a farlo funzionare con jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Inoltre, la loro demo sembra non funzionare così come farà solo una diapositiva una volta prima di lanciare un milione di errori.

Questa funzione è inclusa come parte dell'interfaccia utente di jquery http://docs.jquery.com/UI/Effects/Slide se desideri estenderla con i tuoi nomi puoi 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);
    });
  }
});

avrai bisogno dei seguenti riferimenti

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

Non dimenticare il padding 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 l'aggiunta degli argomenti speed / callback, è un completo sostituto di slideUp()e slideDown().

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

Nota: puoi modificare la larghezza dell'animazione a tuo piacimento, istanza di 750 px.

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