jQuery slide left and show

Question

I extended the jQuery effects called slideRightShow() and slideLeftHide() with a couple functions that work similarly to slideUp() and slideDown() as seen below. However, I would also like to implement slideLeftShow() and slideRightHide(). I know there are substantial libraries that offer this type of thing (I'd like to avoid adding another large set of javascript files), but can anyone provide a simple example of how to implement either slideLeftShow() or 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() {
      ???
    });
  }
});

The above slideRightShow function starts showing the image from the left side and it progresses toward the right side. I am looking for some way to do the same thing but start from the right side and progress toward the left. Thanks!

EDIT

jQuery Interface has something like I need (I basically need their "slide in right" and "slide out left" functions), but I couldn't get this to work with jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Also, their demo seems to broken as well as it will only do a slide once before throwing a million errors.

Answer 1

This feature is included as part of jquery ui http://docs.jquery.com/UI/Effects/Slide if you want to extend it with your own names you can use this.

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

you will need the following references

<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
<script src="http://ui.jquery.com/latest/ui/effects.core.js"&gt;&lt;/script&gt;
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"&gt;&lt;/script&gt;

Answer 2

Don't forget the padding and margins...

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

With the speed/callback arguments added, it's a complete drop-in replacement for slideUp() and slideDown().