jQuery slide left and show

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>

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().

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) && fn.call(this);    });}$.fn.fadeSlideLeft = function(speed,fn) {    return $(this).animate({        'opacity' : 0,        'width' : '0px'    },speed || 400,function() {        $.isFunction(fn) && fn.call(this);    });}