jQuery nach links schieben und anzeigen

Ich erweiterte die jQueryEffekte genannt slideRightShow()und slideLeftHide()mit ein paar Funktionen , dass die Arbeit ähnlich slideUp()und slideDown()wie unten zu sehen. Allerdings würde Ich mag auch implementieren slideLeftShow()und slideRightHide().

Ich weiß, dass es umfangreiche Bibliotheken gibt, die diese Art von Dingen anbieten (ich möchte vermeiden, einen weiteren großen Satz von javascriptDateien hinzuzufügen ), aber kann jemand ein einfaches Beispiel für die Implementierung von entweder slideLeftShow()oder geben 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() {
      ???
    });
  }
});

Die obige slideRightShowFunktion zeigt das Bild von der linken Seite an und geht zur rechten Seite. Ich suche nach einer Möglichkeit, dasselbe zu tun, aber beginne von der rechten Seite und gehe nach links . Vielen Dank!

BEARBEITEN

jQuery Interface hat so etwas wie das, was ich brauche (ich brauche im Grunde die Funktionen "rechts einschieben" und "links herausschieben"), aber ich konnte dies nicht mit jQuery 1.3 zum Laufen bringen : http://interface.eyecon.ro/demos /ifx.html . Außerdem scheint ihre Demo kaputt zu sein, da sie nur einmal eine Folie erstellt, bevor eine Million Fehler ausgegeben werden.

Diese Funktion ist Teil von jquery ui http://docs.jquery.com/UI/Effects/Slide. Wenn Sie sie mit Ihren eigenen Namen erweitern möchten, können Sie sie verwenden.

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

Sie benötigen die folgenden Referenzen

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

Vergessen Sie nicht die Polsterung und die Ränder ...

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

Mit den hinzugefügten Geschwindigkeits- / Rückrufargumenten ist dies ein vollständiger Ersatz für slideUp()und slideDown().

Sie können durch das Hinzufügen dieser Zeile auf eigene Skriptdatei neue Funktion , um Ihre jQuery - Bibliothek hinzufügen , und Sie können leicht verwenden fadeSlideRight()und fadeSlideLeft().

Hinweis: Sie können die Breite der Animation ändern, wenn Sie eine Instanz von 750px mögen.

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

Und wenn Sie die Geschwindigkeit variieren und Rückrufe einschließen möchten, fügen Sie sie einfach folgendermaßen hinzu:

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