jQuery scorrevole sinistra e spettacolo

Question

ho esteso gli effetti jQuery chiamati slideRightShow() e slideLeftHide() con un paio di funzioni che lavorano in modo simile a slideUp() e slideDown() come si vede qui sotto. Tuttavia, vorrei anche per implementare slideLeftShow() e slideRightHide().

So che ci sono le librerie sostanziali che offrono questo tipo di cosa (mi piacerebbe evitare di aggiungere un altro grande gruppo di file javascript), ma chiunque può fornire un semplice esempio di come implementare sia 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. Cerco un modo per fare la stessa cosa, ma iniziare dal lato destro e il progresso verso sinistra . Grazie!

Modifica

jQuery Interface ha qualcosa come ho bisogno (ho praticamente bisogno di loro "presentazione in destra" e "sinistra" sfilare funzioni), ma non ho potuto arrivare a questo lavoro con jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Inoltre, il loro demo sembra rotto, così come sarà solo fare una diapositiva una volta prima di lanciare un milione di errori.

Answer 1

Questa funzionalità è inclusa come parte di jQuery UI http://docs.jquery.com/UI / Effetti / Presentazione se si desidera estendere con i propri nomi è possibile utilizzare questo.

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

sono necessari i 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>

Answer 2

Non dimenticare l'imbottitura e 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 i / argomenti di callback velocità aggiunto, si tratta di un completo drop-in sostituzione di slideUp() e slideDown().

Answer 3

È possibile aggiungere nuove funzioni alla libreria jQuery aggiungendo queste righe sul proprio file di script e si può facilmente utilizzare fadeSlideRight() e fadeSlideLeft().

. Nota: è possibile modificare la larghezza di animazione come ti piace istanza 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);
    });
}

Answer 4

E se si vuole variare la velocità e includere le richiamate semplicemente aggiungere 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);
                });
            }
        });