effects - 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"></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>