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

User · Accepted Answer

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>

User · Answer

You can add new function to your jQuery library by adding these line on your own script file and you can easily use fadeSlideRight   and fadeSlideLeft     Note  you can change width of animation as you like instance of 750px     fn fadeSlideRight   function speed fn        return   this  animate            opacity    1           width     750px        speed    400  function               isFunction fn   amp  amp  fn call this                fn fadeSlideLeft   function speed fn        return   this  animate            opacity    0           width     0px        speed    400 function               isFunction fn   amp  amp  fn call this

User · Answer

And if you want to vary the speed and include callbacks simply add them like this            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

User · Answer

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

[jquery] jQuery slide left and show

Examples related to jquery

Examples related to effects