jQuery nach links schieben und anzeigen

Ich verlängerte die jQuery Effekte genannt slideRightShow() und slideLeftHide() mit ein paar Funktionen, die ähnlich funktionieren wie slideUp() und slideDown() wie unten zu sehen. Allerdings würde ich das auch gerne umsetzen slideLeftShow() und slideRightHide().

Ich weiß, dass es beträchtliche Bibliotheken gibt, die diese Art von Dingen anbieten (ich möchte vermeiden, einen weiteren großen Satz von javascript Dateien), aber kann jemand ein einfaches Beispiel dafür geben, wie man beides implementiert slideLeftShow() oder 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() {
      ???
    });
  }
});

Obenstehendes slideRightShow Die Funktion beginnt mit der Anzeige des Bildes von der linken Seite und setzt sich zur rechten Seite fort. Ich suche nach einer Möglichkeit, dasselbe zu tun, aber beginne von der rechten Seite und gehe nach links vor. Danke!

BEARBEITEN

jQuery Interface hat so etwas wie ich brauche (ich brauche im Grunde die Funktionen “slide in right” und “slide out left”), 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 und sie wird nur einmal eine Folie machen, bevor sie eine Million Fehler auslöst.

Diese Funktion ist Teil von jquery ui http://docs.jquery.com/UI/Effects/Slide Wenn Sie es mit Ihren eigenen Namen erweitern möchten, können Sie dies 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 es ein vollständiger Drop-In-Ersatz für slideUp() und slideDown().

Sie können Ihrer jQuery-Bibliothek neue Funktionen hinzufügen, indem Sie diese Zeile in Ihre eigene Skriptdatei einfügen und einfach verwenden fadeSlideRight() und fadeSlideLeft().

Hinweis: Sie können die Breite der Animation nach Belieben ändern, z. B. 750 Pixel.

$.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 einbeziehen möchten, fügen Sie sie einfach wie folgt 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);
                });
            }
        });